each(callback)?

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

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

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

HTML 代碼:?

復制代碼代碼如下:
<img/><img/>jQuery 代碼:?
$("img").each(function(i){?
this.src = "test" + i + ".jpg";?
});?

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

復制代碼代碼如下:
<button>Change colors</button>?
<span></span>?
<div></div>?
<div></div>?
<div></div>?
<div></div>?
<div id="stop">Stop here</div>?
<div></div>?
<div></div>?
<div></div>?

jQuery 代碼:?

復制代碼代碼如下:
$("button").click(function(){?
$("div").each(function(index,domEle){?
$(domEle).css("backgroundColor","wheat");?
if($(this).is("#stop")){?
$("span").text("在div塊為#"+index+"的地方停止。");?
return false;?
}?
});?

或者這么寫：?

復制代碼代碼如下:
$("button").click(function(){?
$("div").each(function(index){?
$(this).css("backgroundColor","wheat");?
if($(this).is("#stop")){?
$("span").text("在div塊為#"+index+"的地方停止。");?
return false;?
}?
});?

圖解:


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

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

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

復制代碼代碼如下:
$("button").click(function(){?
$("li").each(function(){?
alert($(this).text())?
});?
});?

實例?
obj 對象不是數組?
該方法同1的最大區別是：fn方法會被逐次不考慮返回值的進行進行。換句話說，obj對象的所有屬性都會被fn方法進行調用，即使fn函數返回false。調用傳入的參數同1類似。?

復制代碼代碼如下:
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')。?

轉載于:https://www.cnblogs.com/good10001/p/4760411.html

總結

以上是生活随笔為你收集整理的JQuery中each()的使用方法说明的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。