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 = "<" + index + "/" + totalRecord
+ ">";
// 检验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方法对比