Wu Yudong's Blog

$.each()是对数组，json和dom结构等的遍历，记录一下它的使用方法

1、遍历一维数组

 var arr1=['aa','bb','cc','dd'];
 $.each(arr1,function(i,val){
 //两个参数，第一个参数表示遍历的数组的下标，第二个参数表示下标对应的值
 console.log(i+'->'+val);
})

输出的结果为：

0->aa
1->bb
2->cc
3->dd

2、遍历二维数组

var arr2=[['aaa','bbb'],['ccc','ddd'],['eee','fff']];
$.each(arr2,function(i,item){ 
//两个参数，第一个参数表示下标，第二个参数表示一维数组中的每一个数组
 console.log(i+'->'+item);
})

输出的结果为：

0->aaa,bbb
1->ccc,ddd
2->eee,fff

3、处理json

var json1={key1:'a',key2:'b',key3:'c'};
 $.each(json1,function(key,value){  //遍历键值对
            console.log(key+'->'+value);
  })

输出的结果为：

key1->a
key2->b
key3->c

4、二维数组中有json对象

var arr3=[{name:'n1',age:18},{name:'n2',age:20},{name:'n3',age:22}];
$.each(arr3,function(i,val){
    console.log(i+'->'+val);   
    console.log(val.name); //获取每一个json里面的name值
    console.log(val["name"]);
    $.each(val,function(key,val2){
        console.log(key+'->'+val2);
    })
});

5、处理dom元素

html代码如下：

<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"/>

js代码如下：

$.each($('input:hidden'),function(i,val){
    console.log(i+'````'+val);
    /*0````[object HTMLInputElement]
    1````[object HTMLInputElement]
    2````[object HTMLInputElement]
    3````[object HTMLInputElement]*/
    console.log(val.name+'`````'+val.value);
   /* aaa`````111
   bbb`````222
    ccc`````333
   ddd`````444*/
})

以上就是$.each()最基本的使用了，

jQuery中还有另外一种写法来遍历元素

$("input:hidden").each(function(i,val){  
//第一个参数表示索引下标，第二个参数表示当前索引元素
    alert(i);
    alert(val.name);
    alert(val.value);       
});