jQuery中$.each()函数使用

时间:2022-12-03 14:56:03

  jQuery中的each函数很方便,$.each()函数封装了十分强大的遍历功能,他可以遍历一维数组、多维数组、DOM,JSON

等等,AIJavaScript开发过程中使用$.each可以大大的减轻我们的工作量。

  $.each和$(selector).each()不同,后者专用于jquery对象的遍历,前者可用于遍历任何的集合(无论是数组或是对象),

 如果是数组,回调函数每次传入数组的索引和对应的值(值也可以通过this关键字获取,但JavaScript总是会包装this值

  作为一个对象,不论是一个字符串或是一个数字),方法会返回被遍历对象的第一参数。

  each()方法能使DOM循环结构简洁,不容易出错。

  下面是each函数的几种常用的用法:

   1.each处理数组

    var arr1 = ['aa', 'bb' , 'cc'];

    $.each(arr1, function(i, val){

     alert(i);

     alert(val);

});

    alert(i)输出:0,1,2

    alert(val)输出:aa,bb,cc


 2.each处理二维数组
  var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]   
     $.each(arr, 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']
  
    两重循环遍历二维数组:
    var arr = [['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

 3.each处理json数据。

   var obj = { one:1, two:2, three:3};   

   each(obj, function(key, val) {   

     alert(key);  

 alert(val);   

});
这里alert(key)将输出one two three
alert(val)将输出one,1,two,2,three,3

4.each处理DOM元素,以一个input表单元素作为例子:

  dom中有一下代码:

   <input name="aaa" type="hidden" value="111" />

   <input name="bbb" type="hidden" value="222" />

   <input name="ccc" type="hidden" value="333" />

   <input name="ddd" type="hidden" value="444"/>
   使用each遍历:

    $.each($('input:hidden'), function(i, val){

    alert(val);

     alert(i);

     alert(val.name);

     alert(val.value);

});

alert(i)将输出为0,1,2,3

alert(val.name);将输出aaa,bbb,ccc,ddd,如果使用this.name将输出同样的结果
alert(val.value); 将输出111,222,333,444,如果使用this.value将输出同样的结果

变换一种形式:

 $('input:hidden').each(function(i, val){

  alert(i);

  alert(val.name);

  alert(val.value);

});

   输出结果和上面是一样的。


  总结:从以上的例子可知jQuery和jQuery对象都实现了each方法,对于jQuery对象,只是把each方法简单的进行了

  委托:把jQuery对象作为第一个参数传递给了jQuery的each方法。本质上还是可以理解为jQuery的each方法遍历jQuey对象。