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

CreateTime--2017年4月24日08:31:49
Author: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;";// 检验Idvar inspectId = obj.getAttribute('inspectId');// 获取检验单table所有的tr（除去第一行）var inspectTrs = $('#inspectResContainer>table tr:gt(0)');$(inspectTrs).each(function(){// 获取自定义属性inspect_novar 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方法对比

 

总结

以上是生活随笔为你收集整理的jquery遍历集合数组标签的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。