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


 1、$(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就為遍歷的索引。

 

 2、$.each()

對於jQuery對象,只是把each方法簡單的進行了委托:把jQuery對象作為第一個參數傳遞給jQuery的each方法.換句話說:jQuery提供的each方法是對參數一提供的對象的中所有的子元素逐一進行方法調用。

each()函數是基本上所有的框架都提供了的一個工具類函數,通過它,你可以遍歷對象、數組的屬性值並進行處理。jQuery和jQuery對象都實 現了該方法,對於jQuery對象,只是把each方法簡單的進行了委托:把jQuery對象作為第一個參數傳遞給jQuery的each方法.換句話 說:jQuery提供的each方法是對參數一提供的對象的中所有的子元素逐一進行方法調用。而jQuery對象提供的each方法則是對jQuery內 部的子元素進行逐個調用。

each函數根據參數的類型實現的效果不完全一致:

1、遍歷對象(有附加參數):

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

2、遍歷數組(有附件參數):

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

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

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

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

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
復制代碼


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM