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

標籤：idt   允許   loop   i++   應用   回調   代碼   運行   不同   

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就為遍曆的索引。

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

1、遍曆對象(沒有附加參數)

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

2、遍曆數組(沒有附加參數)

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

 

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

1 var obj = { one:1, two:2, three:3, four:4};  2         $.each(obj,function(i,v){3             console.log(v);//對象的屬性值4             console.log(obj[i]);//對象的屬性值5             console.log(this);//對象當前屬性的值6         })

var arr = [ "one", "two", "three", "four"];            $.each(arr, function(i,v){             alert(this);           console.log(this);           console.log(i,arr[i]);           console.log(v);            }); 

輸出：

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

each(callback)

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

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

迭代兩個映像，並設定它們的 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() 迴圈。 

$(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 ) { 

//通過length來判斷obj是對象還是數組，很巧妙，數組和對象的區別，數組有length，對象肯定沒有，單個對象的length值為undefined

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呢 
jquery再遍曆選定的對象時候用each比較方便。有種應用是找到裡面合格對象後，要跳出這個迴圈。 
javascript的跳出迴圈一般用break. 
同事遇到這個問題，下意識 的用了break，想跳出這個迴圈。結果報錯 
SyntaxError: unlabeled break must be inside loop or switch 
經查，應該用一個 
在回呼函數裡return false即可，大多數jq的方法都是如此的

返回 ‘false‘ 將停止迴圈 (就像在普通的迴圈中使用 ‘break‘)。 返回 ‘true‘ 跳至下一個迴圈(就像在普通的迴圈中使用‘continue‘)。 

 

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