Jquery的 each的使用 $.each()
阿新 • • 發佈：2018-11-09
下面提一下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>