對於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()) }); });
以上是jQuery中的each實作實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章!