jQuery中$.each()函数使用

来源：互联网发布：螳螂捕食老鼠知乎编辑：程序博客网时间：2024/05/07 13:50

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="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对象。

0 0