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 + "¶m2=" + 变量名2 + "¶m_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=" 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(数组)