下面提一下each的幾種常用的用法 1.
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
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數據，這個each就有更厲害了，能循環每一個屬性 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 這邊為何key不是數字而是屬性呢，因為json格式內是一組無序的屬性-值，既然無序，又何來數字呢。 而這個val等同於obj[key] ecah處理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(val)將輸出[object HTMLInputElement]，因為它是一個表單元素。 alert(i)將輸出為0，1，2，3 alert(val.name);將輸出aaa,bbb,ccc,ddd，如果使用this.name將輸出同樣的結果 alert(val.value); 將輸出111,222,333,444，如果使用this.value將輸出同樣的結果
4. 如果將以上面一段代碼改變成如下的形式 $("input:hidden").each(function(i,val){ alert(i); alert(val.name); alert(val.value); });
5.項目中$.each();方法的使用
$.each(result, function(index, temp) {
typeStr += '<option value=' + temp.id + '>' + temp.name
+ '</option>';
});
實例
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> var _mozi=['墨家','墨子','墨翟','兼愛非攻','尚同尚賢']; //本文所用到的數組, 下同 $.each(_mozi,function(key,val){ //回調函數有兩個參數,第一個是元素索引,第二個為當前值 alert('_mozi數組中 ,索引 : '+key+' 對應的值為: '+val); }); </script> </head> <body> </body> </html>