jQuery中$.each()方法的使用

$.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

此時可以對輸出的一維數組進行周遊

$.each(item,function(i,val){  //周遊二維數組
         console.log(i+'`````'+val);
 })
輸出的結果為：

0````aaa,bbb
   0`````aaa
   1`````bbb
1````ccc,ddd
   0`````ccc
   1`````ddd
2````eee,fff
   0`````eee
   1`````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);   
　　　　//輸出
　　　　/* 0`````[object Object] 1`````[object Object] i2`````[object Object]*/
            console.log(val.name); //擷取每一個json裡面的name值
            console.log(val["name"]);
            $.each(val,function(key,val2){
                console.log(key+'```'+val2);
            })
        });
           

5. 處理dom元素

```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 }) ```

補充：jQuery中還有另外一種寫法來周遊元素

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