JQuery中$.each 和$(selector).each()的區別詳解

 一、$(selector).each()

jQuery 遍歷 - each() 方法主要用於DOM遍歷，each() 方法規定爲每一個匹配元素規定運行的函數。

語法：

$(selector).each(function(index,element))

 

W3School上顯示回調函數是必須的，index - 選擇器的 index 位置，element - 當前的元素（也可以使用 "this" 選擇器）.

$().each,對於這個方法，在dom處理上面用的較多。若是頁面有多個input標籤類型爲checkbox，對於這時用$().each來處理多個checkbook，例如：

$(「input[name=’ch’]」).each(function(i){
    if($(this).attr(‘checked’)==true) {
        //一些操做代碼
    }
})

回調函數是能夠傳遞參數，i就爲遍歷的索引。

 

 二、$.each()

對於jQuery對象，只是把each方法簡單的進行了委託：把jQuery對象做爲第一個參數傳遞給jQuery的each方法.換句話說：jQuery提供的each方法是對參數一提供的對象的中全部的子元素逐一進行方法調用。

each()函數是基本上全部的框架都提供了的一個工具類函數，經過它，你能夠遍歷對象、數組的屬性值並進行處理。jQuery和jQuery對象都實 現了該方法，對於jQuery對象，只是把each方法簡單的進行了委託：把jQuery對象做爲第一個參數傳遞給jQuery的each方法.換句話 說：jQuery提供的each方法是對參數一提供的對象的中全部的子元素逐一進行方法調用。而jQuery對象提供的each方法則是對jQuery內 部的子元素進行逐個調用。

each函數根據參數的類型實現的效果不徹底一致：

一、遍歷對象(有附加參數)：

$.each(Object, function(p1, p2) {
      this;       //這裏的this指向每次遍歷中Object的當前屬性值
      p1; p2;     //訪問附加參數
 }, ['參數1', '參數2']);

二、遍歷數組(有附件參數)：

$.each(Array, function(p1, p2){
      this;       //這裏的this指向每次遍歷中Array的當前元素
      p1; p2;     //訪問附加參數
 }, ['參數1', '參數2']);

三、遍歷對象(沒有附加參數)

$.each(Object, function(name, value) {
      this;      //this指向當前屬性的值
      name;      //name表示Object當前屬性的名稱
      value;     //value表示Object當前屬性的值
 });

四、遍歷數組(沒有附加參數)

1 $.each(Array, function(i, value) {
2       this;      //this指向當前元素
3       i;         //i表示Array當前下標
4       value;     //value表示Array當前元素
5  });
6

 

下面提一下jQuery的each方法的幾種經常使用的用法

1 var arr = [ "one", "two", "three", "four"];   
2 $.each(arr, function(){   alert(this);   });  //上面這個each輸出的結果分別爲：one,two,three,four     
3 var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]  
4 $.each(arr1, function(i, item){   alert(item[0]);  });  //其實arr1爲一個二維數組，item至關於取每個一維數組，  //item[0]相對於取每個一維數組裏的第一個值  //因此上面這個each輸出分別爲：1 4 7     
5  var obj = { one:1, two:2, three:3, four:4};  
6 $.each(obj, function(key, val) {   alert(obj[key]);    });  //這個each就有更厲害了，能循環每個屬性  //輸出結果爲：1 2 3 4

JQuery中的each函數在1.3.2的官方文檔中的描述以下：

each(callback)

以每個匹配的元素做爲上下文來執行一個函數。

意味着，每次執行傳遞進來的函數時，函數中的this關鍵字都指向一個不一樣的DOM元素（每次都是一個不一樣的匹配元素）。並且，在每次執行函數時，都會給函數傳遞一個表示做爲執行環境的元素在匹配的元素集合中所處位置的數字值做爲參數（從零開始的整形）。返回 'false' 將中止循環 (就像在普通的循環中使用 'break')。返回 'true' 跳至下一個循環(就像在普通的循環中使用'continue')。

然後面的callback 則是回調函數，指示遍歷元素的時候應該賦予的操做。先看下面的一個簡單的例子： 
迭代兩個圖像，並設置它們的 src 屬性。注意:此處 this 指代的是 DOM 對象而非 jQuery 對象。

HTML 代碼:

1 <img/><img/>jQuery 代碼: 
2 $("img").each(function(i){ 
3 this.src = "test" + i + ".jpg"; 
4 });

結果:[ <img src="test0.jpg" />, <img src="test1.jpg" /> ] 
固然，在遍歷元素的時候，jquery是容許自定義跳出的，請看示例代碼：你可使用 'return' 來提早跳出 each() 循環。 
HTML 代碼:

1 <button>Change colors</button> 
 2 <span></span> 
 3 <div></div> 
 4 <div></div> 
 5 <div></div> 
 6 <div></div> 
 7 <div id="stop">Stop here</div> 
 8 <div></div> 
 9 <div></div> 
10 <div></div>

jQuery 代碼:

1 $("button").click(function(){ 
2 $("div").each(function(index,domEle){ 
3 $(domEle).css("backgroundColor","wheat"); 
4 if($(this).is("#stop")){ 
5 $("span").text("在div塊爲#"+index+"的地方中止。"); 
6 return false; 
7 } 
8 });

或者這麼寫：

1 $("button").click(function(){ 
2 $("div").each(function(index){ 
3 $(this).css("backgroundColor","wheat"); 
4 if($(this).is("#stop")){ 
5 $("span").text("在div塊爲#"+index+"的地方中止。"); 
6 return false; 
7 } 
8 });

圖解: 

each() 方法規定爲每一個匹配元素規定運行的函數。

提示：返回 false 可用於及早中止循環。 
語法 
$(selector).each(function(index,element))參數 描述 
function(index,element) 必需。爲每一個匹配元素規定運行的函數。 
•index - 選擇器的 index 位置 
•element - 當前的元素（也可以使用 "this" 選擇器

實例 
輸出每一個 li 元素的文本：

$("button").click(function(){ 
  $("li").each(function(){ 
    alert($(this).text()) 
  }); 
});

實例

jQuery.each=function( obj, fn, args ) { 
  if ( args ) { 
    if ( obj.length == undefined ){ 
       for ( var i in obj ) 
      fn.apply( obj, args ); 
    }else{ 
       for ( var i = 0, ol = obj.length; i < ol; i++ ) { 
         if ( fn.apply( obj, args ) === false ) 
         break; 
       } 
    } 
 } else { 
    if ( obj.length == undefined ) { 
       for ( var i in obj ) 
       fn.call( obj, i, obj ); 
    }else{ 
       for ( var i = 0, ol = obj.length, val = obj[0]; i < ol && fn.call(val,i,val) !== false; val = obj[++i] ){} 
       } 
    } 
    return obj; 
}

須要特別注意的是each方法中fn的具體調用方法並非採用簡單的fn(i,val)或fn(args),而是採用了fn.call(val,i,val)或fn.apply(obj.args)的形式，這意味着，在你本身的fn的實現中，能夠直接採用this指針引用數組或是對象的子元素。

那怎麼跳出each呢 
jquery再遍歷選定的對象時候用each比較方便。有種應用是找到裏面符合條件的對象後，要跳出這個循環。 
javascript的跳出循環通常用break. 
同事遇到這個問題，下意識 的用了break，想跳出這個循環。結果報錯 
SyntaxError: unlabeled break must be inside loop or switch 
經查，應該用一個 
在回調函數裏return false便可，大多數jq的方法都是如此的

返回 'false' 將中止循環 (就像在普通的循環中使用 'break')。 
返回 'true' 跳至下一個循環(就像在普通的循環中使用'continue')。

該方法同1的最大區別是：fn方法會被逐次不考慮返回值的進行進行。換句話說，obj對象的全部屬性都會被fn方法進行調用，即便fn函數返回false。調用傳入的參數同1相似。

 

對於遍歷一個數組，用$.each()來處理，簡直爽到了極點。例如：

$.each([{「name」:」limeng」,」email」:」xfjylimeng」},{「name」:」hehe」,」email」:」xfjylimeng」},function(i,n)
{
alert(「索引:」+i,」對應值爲：」+n.name);
});

參數i爲遍歷索引值，n爲當前的遍歷對象.

 

var arr1 = [ 「one」, 「two」, 「three」, 「four」, 「five」 ];
$.each(arr1, function(){
alert(this);
});
輸出：one   two  three  four   five
var arr2 = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
$.each(arr2, function(i, item){
alert(item[0]);
});
輸出：1   4   7
var obj = { one:1, two:2, three:3, four:4, five:5 };
$.each(obj, function(key, val) {
alert(obj[key]);
});

輸出：1 2 3 4 5

 

在jQuery裏有一個each方法，用起來很是的爽，不用再像原來那樣寫for循環，jQuery源碼裏本身也有不少用到each方法。

其實jQuery裏的each方法是經過js裏的call方法來實現的。

下面簡單介紹一下call方法。
call這個方法很奇妙，其實官方的說明是：「調用一個對象的一個方法，以另外一個對象替換當前對象。」網上更多的解釋是變換上下文環境，也有說是改變上下文this指針。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])

參數
thisObj
可選項。將被用做當前對象的對象。
arg1, arg2, , argN
可選項。將被傳遞方法參數序列。
說明
call 方法能夠用來代替另外一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變爲由 thisObj 指定的新對象。

引用網上有一個很經典的例子

Js代碼：

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 對象的引用。

具體call更深刻的就不在這裏提了。

下面提一下jQuery的each方法的幾種經常使用的用法

Js代碼：

var arr = [ 「one」, 「two」, 「three」, 「four」];
$.each(arr, function(){
alert(this);
});
//上面這個each輸出的結果分別爲：one,two,three,four

var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
$.each(arr1, function(i, item){
alert(item[0]);
});
//其實arr1爲一個二維數組，item至關於取每個一維數組，
//item[0]相對於取每個一維數組裏的第一個值
//因此上面這個each輸出分別爲：1   4   7

var obj = { one:1, two:2, three:3, four:4};
$.each(obj, function(key, val) {
alert(obj[key]);
});
//這個each就有更厲害了，能循環每個屬性
//輸出結果爲：1   2  3  4