jquery遍历集合&数组&标签

it2025-04-27  12

jquery遍历集合&数组的两种方式

CreateTime--2017年4月24日08:31:49Author:Marydon

方法一:

$(function(){ $("input:button").click(function(){ $.getJSON("testAction",function(data){ var content = ""; /*方法一*/ $(data).each(function(index,value){ alert(value); content+='<div class="comment"><h6>' + value.name +':</h6><p class="para">' + value.review +'</p></div>'; }); $("#resText").html(content); }); }); });

方法二:

$(document).ready(function(){ $("input:button").click(function(){ $.getJSON("testAction",function(data){ //$("#resText").empty();/*将该div的内容清空*/ var content = ""; /*方法二*/ $.each(data,function(index,value){ content+='<div class="comment"><h6>' + value.name +':</h6><p class="para">' + value.review +'</p></div>'; }); $("#resText").html(content); }); }); });

注意事项:   1.字符串的拼接   2.$("要获取的标签").html("展示在该标签里的内容");//将会覆盖掉原来标签里的所有内容;    $("要获取的标签").empty();//将该标签里的内容置空   3.字符串与变量相互拼接问题     a.字符串拼接变量:       "testJsonAction?param1=" + 变量名1 + "&param2=" + 变量名2 + "&param_n=" + 变量n;     b.字符串拼接变量,再拼接字符串       '<div class="comment"><h6>' + value +'</h6></div>'

UpdateTime--2017年6月30日18:40:37

二、jQuery遍历标签

  HTML部分一

<div id="jyDiv" class="Container"> <table cellspacing="0" cellpadding="1" border="0" oldClass="TableRow" class="TableRow" onclick="javascript:RowSelect(this);consAppl_search.searchInspectDetail(this);" key="0" inspectId="" totalRecord="0" width="100%" onmouseover="javascript:if (this.className!='TableRowSelected') this.className='TableRowOver'" onmouseout="javascript:if (this.className!='TableRowSelected') this.className='TableRow'"> <tbody> <tr> <td class="medical_table_cell"> 检验单名称 <!-- 必要参数:检验单号 --> <input type="hidden" name="ASSAY_NO" value="" /> <!-- 检验单名称 --> <input type="hidden" name="ASSAY_NAME" value="" /> <!-- 必要参数:标本号 --> <input type="hidden" name="SAMPLE_NO" value="" /> <!-- 标本名称 --> <input type="hidden" name="SAMPLE_NAME" value="" /> <!-- 送检医生 --> <input type="hidden" name="SEND_DOCTOR" value="" /> <!-- 送检时间 --> <input type="hidden" name="SEND_TIME" value="" /> <!-- 审核医生 --> <input type="hidden" name="AUDIT_DOCTOR" value="" /> <!-- 审核时间 --> <input type="hidden" name="AUDIT_TIME" value="" /> <!-- 化验医生 --> <input type="hidden" name="TEST_DOCTOR" value="" /> <!-- 化验时间 --> <input type="hidden" name="TEST_TIME" value="" /> </td> <td class="medical_table_cell"></td> </tr> <tr> <td class="medical_table_cell">化验医生:</td> <td class="medical_table_cell">化验时间:</td> </tr> </tbody> </table> </div>

  HTML部分二

<div style="width: 99%; height: 98%; overflow: auto; margin: 0 auto;" id="inspectResContainer"> <table class="Table" cellspacing="0" cellpadding="1" border="0"> <tbody> <tr class="TableHeader" align="center"> <td class="TableHeaderCell" nowrap="nowrap" width="13%">标本名称</td> <td class="TableHeaderCell" nowrap="nowrap">检验结果</td> <td class="TableHeaderCell" nowrap="nowrap" width="13%">结果单位</td> <td class="TableHeaderCell" nowrap="nowrap" width="13%">参考值</td> <td class="TableHeaderCell" nowrap="nowrap" width="13%">检验状态</td> <td class="TableHeaderCell" nowrap="nowrap" width="13%">特殊描述</td> </tr> <tr align="center" INSPECT_NO=""> <td nowrap="nowrap" class="TableCell" align="left"> <!-- 必要参数:检验单号 --> <input type="hidden" name="INSPECT_NO" value="" /> <!-- 检验单名称 --> <input type="hidden" name="INSPECT_NAME" value="" /> <!-- 标本号 --> <input type="hidden" name="SPEC_NO" value="" /> <!-- 标本名称 --> <input type="hidden" name="SPEC_NAME" value="" /> <!-- 检验结果 --> <input type="hidden" name="TEST_RESULT" value="" /> <!-- 检验状态 --> <input type="hidden" name="TEST_STATUS" value="" /> <!-- 结果单位 --> <input type="hidden" name="UNIT" value="" /> <!-- 参考值下限 --> <input type="hidden" name="LOW" value="" /> <!-- 参考值上限 --> <input type="hidden" name="HIGH" value="" /> <!-- 特殊描述 --> <input type="hidden" name="DESCRIBE" value="" /> </td> <td nowrap="nowrap" class="TableCell" align="left"></td> <td nowrap="nowrap" class="TableCell" align="left"></td> <td nowrap="nowrap" class="TableCell" align="left"></td> <td nowrap="nowrap" class="TableCell" align="left"></td> <td nowrap="nowrap" class="TableCell" align="left"></td> </tr> </tbody> </table> </div>

   方法一:$().each(function(不带参){})

/** * 查看检验详情 * * @param obj * 检验列表table对象 */ this.searchInspectDetail = function(obj) { // 索引号 var index = obj.getAttribute('key'); // 总记录数 var totalRecord = obj.getAttribute('totalRecord'); // 将计数放到这里面 $get('showCountResult4').innerHTML = "&lt;" + index + "/" + totalRecord + "&gt;"; // 检验Id var inspectId = obj.getAttribute('inspectId'); // 获取检验单table所有的tr(除去第一行) var inspectTrs = $('#inspectResContainer>table tr:gt(0)'); $(inspectTrs).each(function(){ // 获取自定义属性inspect_no var inspect_no = $(this).attr('inspect_no'); // 相同显示,不同隐藏 if (inspect_no == inspectId) { $(this).show(); } else { $(this).hide(); } }); }

  方法二:$().each(function(带参){})

$('#jyDiv > table').each(function(index){ $(this).attr("key",index+1); $(this).attr("totalRecord",i); });

  注意:参数所代表的含义见文章javascript-Array(数组)

 

 相关推荐:

javascript 跳出(终止)forEach循环js与jQuery实现方式对比汇总js与jQuery方法对比

 

 

转载于:https://www.cnblogs.com/Marydon20170307/p/6543103.html

最新回复(0)