本文將對 jQuery each() 函式作一個比較全面的介紹。 each() 函式是 jQuery 中最重要也是最常用的函式之一。通過本文你將明白為什麼 each() 函式如此大放異彩，同時還將詳細介紹如何使用 each() 函式。
什麼是 jQuery .each()
jQuery 的 each() 函式用來遍歷目標 jQuery 物件中的所有元素。在這裡解釋一下什麼是 jQuery 物件，以防有讀者還不太清楚。 jQuery 物件指的是包含一個或多個 DOM 元素的物件，並且暴露出所有的 jQuery 函式。 each() 函式非常適合操作多元素的 DOM 、任意陣列的迴圈以及物件的屬性。除了這個函式， jQuery 裡還有一個同名的輔助函式，不需要事先選擇或建立 DOM 元素就可以呼叫這個輔助函式。在接下來的部分將更詳細地介紹它們。
jQuery 的 .each() 語法
這裡將結合實際例子講解 .each() 的不同用法。
下面這個例子選中了網頁上所有 div 標籤，並列印每個 div 標籤的 index 和 ID。輸出的結果可能是： “div0:header”、 “div1:body”、 “div2:footer”。 jQuery 中 each() 函式的這種用法和效用函式的用法完全不同。
|
1 2 3 4 |
// DOM ELEMENTS $('div').each(function (index, value) { console.log('div' + index + ':' + $(this).attr('id')); }); |
下一個例子展示了效用函式的用法。在這個例子當中，把被迴圈的物件當作 each() 函式的第一個引數。這個例子展示瞭如何遍歷一個陣列：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// ARRAYS var arr = [ 'one', 'two', 'three', 'four', 'five' ]; $.each(arr, function (index, value) { console.log(value); // Will stop running after "three" return (value !== 'three'); }); // Outputs: one two three |
最後這個例子中，遍歷了一個物件中的所有屬性：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// OBJECTS var obj = { one: 1, two: 2, three: 3, four: 4, five: 5 }; $.each(obj, function (index, value) { console.log(value); }); // Outputs: 1 2 3 4 5 |
這一切都歸結為提供了適當的回撥函式。這個回撥函式的上下文， this ，等於它的第二個引數，也就是當前的 value 值。通常上下文都是一個物件，所以得把原始值封裝起來。也就是說，這個 value 值和上下文之間不存在嚴格相等關係。 回撥函式的第一個引數是當前的 index，它可能是陣列裡一個數字或物件中一個字串。
1.基本的 jQuery.each() 例項
一起來看看 each() 函式是如何處理一個 jQuery 物件的。第一個例子中選擇了頁面中所有的 a 標籤，並列印出它們的 href 屬性。
|
1 2 3 |
$('a').each(function (index, value){ console.log($(this).attr('href')); }); |
第二個例子中輸出了網頁上所有的外鏈 href 屬性（這裡我們假設只用了 HTTP 協議）：
|
1 2 3 4 5 6 7 |
$('a').each(function (index, value){ var link = $(this).attr('href'); if (link.indexOf('http://') === 0) { console.log(link); } }); |
假設當前頁面中有如下這些連結：
|
1 2 3 |
<a href="http://www.jquery4u.com">JQUERY4U</a> <a href="http://www.phpscripts4u.com">PHP4U</a> <a href="http://www.blogoola.com">BLOGOOLA</a> |
那麼第二個例子將輸出如下結果：
|
1 2 3 |
http://jquery4u.com http://www.phpscripts4u.com http://www.blogoola.com |
需要注意的是， 在 each() 當中使用 jQuery 物件的 DOM 元素時，必須對這些 DOM 元素再次封裝。這是因為 jQuery 實際上只是將 DOM 元素封裝成陣列。使用 jQuery each() 方法其實就是像普通陣列那樣迭代這個陣列。因此，無法在迭代器裡得到封裝好的元素。
2. jQuery.each() 陣列例項
首先看看 each() 是如何處理一個普通陣列的。
|
1 2 3 4 |
var numbers = [1, 2, 3, 4, 5, 6]; $.each(numbers , function (index, value){ console.log(index + ':' + value); }); |
這段程式碼輸出的結果是：0:1、 1:2、 2:3、 3:4、 4:5, 和 5:6。
這段程式碼沒有特別的。陣列帶數字索引，所以我們從０開始向後取數字，一直取到 N – 1，其中 N 是這個陣列中元素的個數。
3. jQuery.each() JSON 例項
有時可能遇到更復雜的資料結構，比如陣列包含陣列、物件包含物件、物件包含陣列，或者陣列包含物件。這些情況下， each() 方法是如何發揮作用的呢？
|
1 2 3 4 5 6 7 8 9 10 11 |
var json = [ { 'red': '#f00' }, { 'green': '#0f0' }, { 'blue': '#00f' } ]; $.each(json, function () { $.each(this, function (name, value) { console.log(name + '=' + value); }); }); |
這個例子的輸出結果是 red=#f00、 green=#0f0、 blue=#00f。
我們用巢狀呼叫 each() 方法，來處理這種巢狀結構。外層的 each() 呼叫是用來處理變數名為 JSON 的陣列，內層的 each() 呼叫是用來處理巢狀在陣列中的物件。本例當中，每個物件只有一個屬性，但是一般來說有多個屬性也是可以的。
4.jQuery.each() 類例項
這個例子展示了在下面 HTML 程式碼中，如何遍歷所有 class 屬性為 productDescription 的元素。
|
1 2 3 4 5 |
<div class="productDescription">Red</div> <div>Pink</div> <div class="productDescription">Orange</div> <div class="generalDescription">Teal</div> <div class="productDescription">Green</div> |
我們使用 each() 輔助函式，取代在選擇器中用 each() 方法。
|
1 2 3 |
$.each($('.productDescription'), function (index, value) { console.log(index + ':' + $(value).text()); }); |
本例中的輸出結果是0:Red, 1:Orange, 2:Green。
我們不一定非要帶上 index 和 value。它們只是用來幫助判斷當前正在迭代處理的 DOM 元素的引數。而且，這種情況下也能更方便的使用 each 方法。可以簡寫成這樣：
|
1 2 3 |
$('.productDescription').each(function () { console.log($(this).text()); }); |
在控制檯上得到的結果如下：
|
1 2 3 |
Red Orange Green |
同樣地，必須把 DOM 元素封裝到在一個新的 jQuery 例項中。使用 text() 方法將元素的文字輸出。
5. jQuery .each() 延遲例項
在下面的這個例子中，當使用者點選 ID 為 5demo 的元素時，所有的列表元素都會馬上變成橙色。然後元素根據 index 值設定延遲時間 (0, 200, 400, … 毫秒) 逐個淡出。
|
1 2 3 4 5 6 7 8 |
$('#5demo').bind('click', function (e) { $('li').each(function (index) { $(this).css('background-color', 'orange') .delay(index * 200) .fadeOut(1500); }); e.preventDefault(); }); |
結論
程式設計時應該儘可能多地使用 each() 函式，這種高效的方法能為我們節省大量時間。除了 jQuery 之外，還可以使用 ECMAScript 5 陣列中的 forEach() 方法。
謹記： $.each() 和 $(selector).each() 是用不同方式定義的兩種不同的方法。
打賞支援我翻譯更多好文章，謝謝！
打賞譯者
打賞支援我翻譯更多好文章，謝謝！
任選一種支付方式
