jQuery中的each實作實例教程

對於jquery對象，只是把each方法簡單的進行了委託：把jQuery對像作為第一個參數傳遞給jQuery的each方法.換句話說：jQuery提供的each方法是對參數一提供的對象的中所有的子元素逐一進行方法呼叫

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

each(callback)

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

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

而後面的callback 則是回呼函數，指示遍歷元素的時候應該賦予的運算。先看下面的一個簡單的例子：
迭代兩個圖像，並設定它們的 src 屬性。注意:此處 this 指涉的是 DOM 物件而非 jQuery 物件。

html 程式碼:

<img / alt="jQuery中的each實作實例教程" ><img / alt="jQuery中的each實作實例教程" >jQuery 代码:
$("img").each(function(i){
this.src = "test" + i + ".jpg";
});

結果:[ , ]

當然，在遍歷元素的時候，jquery是允許自訂跳出的，請看範例程式碼：你可以使用'return' 來提前跳出each() 迴圈。

HTML 程式碼:

<button>Change colors</button>
<span></span>
<p></p>
<p></p>
<p></p>
<p></p>
<p id="stop">Stop here</p>
<p></p>
<p></p>
<p></p>

jQuery 程式碼:

$("button").click(function(){
$("p").each(function(index,domEle){
$(domEle).css("backgroundColor","wheat");
if($(this).is("#stop")){
$("span").text("在p块为#"+index+"的地方停止。");
return false;
}
});

或這麼寫：

$("button").click(function(){
$("p").each(function(index){
$(this).css("backgroundColor","wheat");
if($(this).is("#stop")){
$("span").text("在p块为#"+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。不是採用簡單的fn(i,val)或fn(args),而是採用了fn.call(val,i,val)或fn.apply(obj.args)的形式，這意味著，在你自己的fn的實作中，可以直接採用this指標來引用數組或是物件的子元素。種應用是找到裡面符合條件的物件後，要跳出這個循環。用了break，想跳出這個迴圈。的###

以上是jQuery中的each實作實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！