jquery中$each()

Posted 付出才有回报,敢于尝试才能成功。

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery中$each()相关的知识,希望对你有一定的参考价值。

$.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()往里插入

 

以上是关于jquery中$each()的主要内容,如果未能解决你的问题,请参考以下文章

jquery中使用each()和for循环哪个好些

jquery 的 each 方法中 return 的坑

Jquery .each() 包括寻找干净代码的延迟

如何从 JQuery 中的 each() 函数中中断/退出? [复制]

jquery中each使用return无效

在 Jquery 代码中,我想通过数组、.each、index、variable 为每个文本值分配许多不同的选择器