$.each():可用于遍历任何的集合(无论是数组或对象)
$(selector).each():专用于jquery对象的遍历,
如果是数组,回调函数每次传入数组的索引和对应的值(值亦可以通过this 关键字获取,但javascript总会包装this 值作为一个对象—尽管是一个字符串或是一个数字),方法会返回被遍历对象的第一参数.
each的几种常用的用法
①一维数组:var
arr1 = [
"aaa"
,
"bbb"
,
"ccc"
];
$.each(arr1, function(i,val){ alert(i); alert(val); });
alert(i)将输出0,1,2
alert(val)将输出aaa,bbb,ccc
②一维数组:var
arr2 = [[
'a'
,
'aa'
,
'aaa'
], [
'b'
,
'bb'
,
'bbb'
], [
'c'
,
'cc'
,
'ccc'
]]
$.each(arr2, function(i, item){ alert(i); alert(item); }); //arr2为一个二维数组,item相当于取这二维数组中的每一个数组。 //item[0]相对于取每一个一维数组里的第一个值 alert(i)将输出为0,1,2,因为这二维数组含有3个数组元素 alert(item)将输出为 ['a', 'aa', 'aaa'],['b', 'bb', 'bbb'],['c', 'cc', 'ccc']
$.each(arr, function(i, item){ $.each(item,function(j,val){ alert(j); alert(val); }); }); alert(j)将输出为0,1,2,0,1,2,0,1,2 //将会输出每个数组的每个值 alert(val)将输出为a,aa,aaa,b,bb,bbb,c,cc,ccc
实例:动态生成树
后台返回的是一个二维数组
<div class="wrapper wrapper-content animated fadeInRight"> <div class="row"> <div class="col-lg-12"> <div class="ibox float-e-margins"> <div class="ibox-content"> <ul class="nav" id="menus"> </ul> <span id="liMsg"></span> </div> </div> </div> </div> </div>
<script type="text/javascript"> $(document).ready(function () { jQuery.ajax({ type:'POST', url: '/ZAdmin/MenuHandler.ashx', data: {action:'rootMenu'}, dataType:'json', success: function (data) { if (data.Status == 200) { var htmlLi = ""; $.each(data.Data, function (i, item) { htmlLi +='<li>'; $.each(item, function (j, val) { if (j == 'menu_name') { htmlLi+='<a>' + val + '</a>'; } }); htmlLi+='</li>'; $('#menus').html(htmlLi); }); } else { $('#liMsg').text('异常'); } }, error: function (errorThrown) { jQuery('#liMessage').val('网络通讯异常'); return false; } }) }); </script>
这块遇到一个问题,由于我是动态拼数据,当我用append()时,不能追加到临时变量上,试了很多方法,转成jquery对象也不行
后来只能把动态生成的数据写在临时变量中然后用html()往里插入