本文深入探討 jQuery.each() 函數(shù)——jQuery 中最重要、最常用的函數(shù)之一。我們將探究其重要性，並學(xué)習(xí)如何使用它。

核心要點(diǎn)

1. jQuery.each() 函數(shù)是 jQuery 中一個(gè)多功能工具，用於迭代 DOM 元素、數(shù)組和對(duì)象，從而高效地進(jìn)行多元素 DOM 操作和數(shù)據(jù)處理。
2. 該函數(shù)提供兩種操作模式：作為 jQuery 對(duì)像上調(diào)用的方法（用於 DOM 元素），以及作為數(shù)組和對(duì)象的實(shí)用函數(shù)，每種模式都適用於不同類型的數(shù)據(jù)結(jié)構(gòu)。
3. 通過(guò)實(shí)際示例，本文展示了 jQuery.each() 的強(qiáng)大功能和靈活性，強(qiáng)調(diào)了其在簡(jiǎn)化迭代過(guò)程中的重要性，並重點(diǎn)介紹了用於執(zhí)行類似任務(wù)的替代 JavaScript 方法。

什麼是 jQuery.each()?

jQuery 的 each() 函數(shù)用於循環(huán)遍歷目標(biāo) jQuery 對(duì)象的每個(gè)元素——包含一個(gè)或多個(gè) DOM 元素的對(duì)象，並公開(kāi)所有 jQuery 函數(shù)。它對(duì)於多元素 DOM 操作以及迭代任意數(shù)組和對(duì)象屬性非常有用。

除了此函數(shù)外，jQuery 還提供了一個(gè)同名輔助函數(shù)，無(wú)需事先選擇或創(chuàng)建任何 DOM 元素即可調(diào)用。

jQuery.each() 語(yǔ)法

讓我們看看不同模式的實(shí)際應(yīng)用。

以下示例選擇網(wǎng)頁(yè)上的每個(gè) <div> 元素，並輸出每個(gè)元素的索引和 ID： <pre class='brush:php;toolbar:false;'>// DOM 元素 $('div').each(function(index, value) { console.log(`div${index}: ${this.id}`); });</pre> <p>可能的輸出結(jié)果為：</p> <pre class="brush:php;toolbar:false">&lt;code&gt;div0:header div1:main div2:footer&lt;/code&gt;</pre> <p>此版本使用 jQuery 的 <code>$(selector).each() 函數(shù)，而不是實(shí)用函數(shù)。

下一個(gè)示例顯示了實(shí)用函數(shù)的使用。在這種情況下，要循環(huán)遍歷的對(duì)像作為第一個(gè)參數(shù)給出。在此示例中，我們將展示如何循環(huán)遍歷數(shù)組：

// 數(shù)組
const arr = [
  'one',
  'two',
  'three',
  'four',
  'five'
];

$.each(arr, function(index, value) {
  console.log(value);
  // 將在 "three" 后停止運(yùn)行
  return (value !== 'three');
});

// 輸出：one two three

在最後一個(gè)示例中，我們想演示如何迭代對(duì)象的屬性：

// 對(duì)象
const obj = {
  one: 1,
  two: 2,
  three: 3,
  four: 4,
  five: 5
};

$.each(obj, function(key, value) {
  console.log(value);
});

// 輸出：1 2 3 4 5

所有這些都?xì)w結(jié)為提供適當(dāng)?shù)幕卣{(diào)函數(shù)。回調(diào)函數(shù)的上下文 this 將等於其第二個(gè)參數(shù)，即當(dāng)前值。但是，由於上下文始終是一個(gè)對(duì)象，因此必須包裝原始值：

$.each({ one: 1, two: 2 } , function(key, value) {
  console.log(this);
});

// Number { 1 }
// Number { 2 }

這意味著值和上下文之間沒(méi)有嚴(yán)格的相等性。

$.each({ one: 1 } , function(key, value) {
  console.log(this == value);
  console.log(this === value);
});

// true
// false

第一個(gè)參數(shù)是當(dāng)前索引，它是數(shù)字（對(duì)於數(shù)組）或字符串（對(duì)於對(duì)象）。

1. 基本的 jQuery.each() 函數(shù)示例

讓我們看看 jQuery.each() 函數(shù)如何與 jQuery 對(duì)象結(jié)合使用。第一個(gè)示例選擇頁(yè)面中的所有 a 元素並輸出它們的 href 屬性：

$('a').each(function(index, value){
  console.log(this.href);
});

第二個(gè)示例輸出網(wǎng)頁(yè)上的每個(gè)外部 href（假設(shè)僅使用 HTTP(S) 協(xié)議）：

$('a').each(function(index, value){
  const link = this.href;

  if (link.match(/https?:\/\//)) {
    console.log(link);
  }
});

假設(shè)頁(yè)面上有以下鏈接：

<a href="http://www.miracleart.cn/link/9a4b930f7a36153ca68fdf211c8836a7">SitePoint</a>
<a href="http://www.miracleart.cn/link/235fba44e32ba4dd3a3f72db1a8a6846">MDN web docs</a>
<a href="http://www.miracleart.cn/link/60c4a88bac6125d490af523a8c94e5e1">Example Domain</a>

第二個(gè)示例將輸出：

// DOM 元素
$('div').each(function(index, value) {
  console.log(`div${index}: ${this.id}`);
});

我們應(yīng)該注意，來(lái)自 jQuery 對(duì)象的 DOM 元素在其傳遞給 jQuery.each() 的回調(diào)函數(shù)中的“原生”形式。原因是 jQuery 事實(shí)上只是 DOM 元素?cái)?shù)組的包裝器。通過(guò)使用 jQuery.each()，此數(shù)組的迭代方式與普通數(shù)組相同。因此，我們不會(huì)開(kāi)箱即用地獲得包裝的元素。

關(guān)於我們的第二個(gè)示例，這意味著我們可以通過(guò)編寫 this.href 來(lái)獲取元素的 href 屬性。如果我們想使用 jQuery 的 attr() 方法，我們需要像這樣重新包裝元素：$(this).attr('href')。

2. jQuery.each() 數(shù)組示例

讓我們?cè)倏纯慈绾翁幚砥胀〝?shù)組：

<code>div0:header
div1:main
div2:footer</code>

此代碼段輸出：

// 數(shù)組
const arr = [
  'one',
  'two',
  'three',
  'four',
  'five'
];

$.each(arr, function(index, value) {
  console.log(value);
  // 將在 "three" 后停止運(yùn)行
  return (value !== 'three');
});

// 輸出：one two three

這裡沒(méi)有什麼特別的。數(shù)組具有數(shù)字索引，因此我們獲得從 0 開(kāi)始到 N-1 的數(shù)字，其中 N 是數(shù)組中元素的數(shù)量。

3. jQuery.each() JSON 示例

我們可能有更複雜的數(shù)據(jù)結(jié)構(gòu)，例如數(shù)組中的數(shù)組、對(duì)像中的對(duì)象、數(shù)組中的對(duì)像或?qū)ο裰械臄?shù)組。讓我們看看 jQuery.each() 如何在這種情況下幫助我們：

// 對(duì)象
const obj = {
  one: 1,
  two: 2,
  three: 3,
  four: 4,
  five: 5
};

$.each(obj, function(key, value) {
  console.log(value);
});

// 輸出：1 2 3 4 5

此示例輸出：

$.each({ one: 1, two: 2 } , function(key, value) {
  console.log(this);
});

// Number { 1 }
// Number { 2 }

我們使用嵌套調(diào)用 jQuery.each() 來(lái)處理嵌套結(jié)構(gòu)。外部調(diào)用處理變量 colors 的數(shù)組；內(nèi)部調(diào)用處理各個(gè)對(duì)象。在此示例中，每個(gè)對(duì)像只有一個(gè)鍵，但通常可以使用此代碼處理任意數(shù)量的鍵。

4. jQuery.each() 類示例

此示例演示如何循環(huán)遍歷分配了類 productDescription 的每個(gè)元素（在下面的 HTML 中給出）：

$.each({ one: 1 } , function(key, value) {
  console.log(this == value);
  console.log(this === value);
});

// true
// false

我們使用 each() 輔助函數(shù)而不是選擇器上的 each() 方法。

$('a').each(function(index, value){
  console.log(this.href);
});

在這種情況下，輸出為：

$('a').each(function(index, value){
  const link = this.href;

  if (link.match(/https?:\/\//)) {
    console.log(link);
  }
});

我們不必包含 index 和 value。這些只是幫助確定我們當(dāng)前正在迭代哪個(gè) DOM 元素的參數(shù)。此外，在這種情況下，我們還可以使用更方便的 each 方法。我們可以這樣寫：

<a href="http://www.miracleart.cn/link/9a4b930f7a36153ca68fdf211c8836a7">SitePoint</a>
<a href="http://www.miracleart.cn/link/235fba44e32ba4dd3a3f72db1a8a6846">MDN web docs</a>
<a href="http://www.miracleart.cn/link/60c4a88bac6125d490af523a8c94e5e1">Example Domain</a>

我們將在控制臺(tái)中獲得：

<code>http://www.miracleart.cn/link/9a4b930f7a36153ca68fdf211c8836a7
http://www.miracleart.cn/link/235fba44e32ba4dd3a3f72db1a8a6846
http://www.miracleart.cn/link/60c4a88bac6125d490af523a8c94e5e1</code>

請(qǐng)注意，我們正在將 DOM 元素包裝在一個(gè)新的 jQuery 實(shí)例中，以便我們可以使用 jQuery 的 text() 方法來(lái)獲取元素的文本內(nèi)容。

5. jQuery.each() 延遲示例

在下一個(gè)示例中，當(dāng)用戶單擊 ID 為 5demo 的元素時(shí)，所有列表項(xiàng)將立即設(shè)置為橙色。

const numbers = [1, 2, 3, 4, 5];
$.each(numbers, function(index, value){
  console.log(`${index}: ${value}`);
});

在索引相關(guān)的延遲（0、200、400……毫秒）之後，我們將元素淡出：

<code>0:1
1:2
2:3
3:4
4:5</code>

結(jié)論

在這篇文章中，我們演示瞭如何使用 jQuery.each() 函數(shù)迭代 DOM 元素、數(shù)組和對(duì)象。這是一個(gè)強(qiáng)大且節(jié)省時(shí)間的函數(shù)，開(kāi)發(fā)人員應(yīng)該將其納入自己的工具包中。

如果 jQuery 不是您的首選，您可能需要考慮使用 JavaScript 原生的 Object.keys() 和 Array.prototype.forEach() 方法。還有一些像 foreach 這樣的庫(kù)，可以讓您迭代類數(shù)組對(duì)像或字典式對(duì)象的鍵值對(duì)。

請(qǐng)記?。?code>$.each() 和 $(selector).each() 是以兩種不同方式定義的兩種不同方法。

(本文已於2020 年更新，以反映當(dāng)前最佳實(shí)踐，並更新結(jié)論中關(guān)於使用現(xiàn)代JavaScript 的原生解決方案的建議。要了解更多JavaScript 知識(shí)，請(qǐng)閱讀我們的書籍《JavaScript ：從新手到忍者，第二版》)

關(guān)於 jQuery each() 函數(shù)的常見(jiàn)問(wèn)題

jQuery 中 .each() 函數(shù)的用途是什麼？ jQuery 中的 .each() 函數(shù)用於迭代 DOM 元素集合，並對(duì)每個(gè)元素執(zhí)行特定操作。

如何在 jQuery 中使用 .each() 函數(shù)？您可以通過(guò)使用 jQuery 選擇器選擇一組元素，然後在該選擇上調(diào)用 .each() 來(lái)使用 .each() 函數(shù)。您提供一個(gè)回調(diào)函數(shù)，該函數(shù)定義要對(duì)每個(gè)元素執(zhí)行的操作。

與 .each() 一起使用的回調(diào)函數(shù)的參數(shù)是什麼？回調(diào)函數(shù)接受兩個(gè)參數(shù)：index（集合中元素的當(dāng)前索引）和 element（正在迭代的當(dāng)前 DOM 元素）。

如何在 .each() 回調(diào)函數(shù)中使用 index 參數(shù)？您可以使用 index 參數(shù)來(lái)跟蹤集合中當(dāng)前元素的位置，這對(duì)於條件操作或其他操作非常有用。

.each() 函數(shù)的一些常見(jiàn)用例是什麼？常見(jiàn)的用例包括迭代元素列表以操作其屬性、值或樣式，以及對(duì)集合中的每個(gè)元素執(zhí)行自定義操作。