區別和詳解：jQuery中的 $().each()和$.each()/jQuery.each()

1、認識 　　$().each()遍歷當前jQuery對象，並在每一個元素上執行回調函數。其方法內部是通過調用靜態方法jQuery.each()來實現的。　　jQuery.each()是一個通用的遍歷叠代的靜態方法，用於無縫的遍歷對象或者數組。如果是數組,回調函數每次傳入數組的索引和對應的值(值亦可以通過this 關鍵字獲取,但Javascript總會包裝this 值作為一個對象—盡管是一個字符串或是一個數字),方法會返回被遍歷對象的第一參數。 2、語法： 2.1、$(selector).each(function(index,element) 描述：

function(index,element)

必需。為每個匹配元素規定運行的函數。

index - 選擇器的 index 位置
element - 當前的元素（也可使用 "this" 選擇器）

2.2、jQuery.each(collection,callback(indexInArray,valueofElement))

3、$().each()和$.each(）實例： 3.1、.each() 描述：輸出每個 li 元素的文本：
HTML代碼

<ul>
    <li>Coffee</li>
    <li>Milk</li>
    <li>Soda</li>
</ul>

JS代碼：

$(document).ready(function(){
    $("li").each(function(){
      alert($(this).text())
    });
});

結果為：Coffee Milk Soda

3.2、 jQuery.each() 3.2.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

3.2.2、each處理二維數組

var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]      
$.each(arr, function(i, item){      
      alert(i);   
      alert(item);      
});  
alert(i)將輸出為：0，1，2
alert(item)將輸出為： ['a', 'aa', 'aaa']，['b', 'bb', 'bbb']，['c', 'cc', 'ccc']

3.2.3、對此二位數組的處理稍作變更之後

  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.2.4、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)輸出為：1 2 3

3.2.5、如果不想輸出第一項 (使用retrun true)進入下一遍歷

var myArray=["skipThis", "dothis", "andThis"];
$.each(myArray, function(index, value) {
     if (index == 0) {
     return true; // equivalent to ‘continue' with a normal for loop
}
     // else do stuff…
     alert (index + “: “+ value);
});
結果為：1:dothis
結果為：2:andThis

3.2.6、回調函數中 return false時可以退出$.each(), 如果返回一個非false 即會像在for循環中使用continue 一樣, 會立即進入下一個遍歷. HTML代碼：

<body>
   <div id=”one”></div>
   <div id=”two”></div>
   <div id=”three”></div>
   <div id=”four”></div>
   <div id=”five”></div>
</body>

JS代碼：

 var arr = [ "one", "two", "three", "four", "five" ];//數組
 var obj = { one:1, two:2, three:3, four:4, five:5 }; // 對象
 jQuery.each(arr, function() {  // this 指定值
       $(“#” + this).text(“Mine is ” + this + “.”);  // this指向為數組的值, 如one, two
       return (this != “three”); // 如果this = three 則退出遍歷
 });
 jQuery.each(obj, function(i, val) {  // i 指向鍵, val指定值
       $(“#” + i).append(document.createTextNode(” – ” + val));
 });

結果為：

Mine is one. 
Mine is two.
Mine is three.
– 1
- 2
- 3
 - 4
 - 5

4、擴展 其實jQuery裏的each方法是通過js裏的call方法來實現的。
下面簡單介紹一下call方法。
call這個方法很奇妙，其實官方的說明是：“調用一個對象的一個方法，以另一個對象替換當前對象。”網上更多的解釋是變換上下文環境，也有說是改變上下文this指針。
call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 參數：thisObj --->可選項。將被用作當前對象的對象。參數：arg1, arg2, , argN --->可選項。將被傳遞方法參數序列。說明 :
call 方法可以用來代替另一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變為由 thisObj 指定的新對象。
如果沒有提供 thisObj 參數，那麽 Global 對象被用作 thisObj。

function add(a,b) 
{ 
      alert(a+b); 
} 
function sub(a,b) 
{ 
     alert(a-b); 
} 
add.call(sub,3,1);

這個例子中的意思就是用 add 來替換 sub，add.call(sub,3,1) == add(3,1) ，所以運行結果為：alert(4); // 註意：js 中的函數其實是對象，函數名是對 Function 對象的引用。

Tags:

文章來源：

區別和詳解：jQuery中的 $().each()和$.each()/jQuery.each()

相關文章