本文深入探討 jQuery.each() 函數——jQuery 中最重要、最常用的函數之一。我們將探究其重要性，並學習如何使用它。
核心要點
什麼是 jQuery.each()?
jQuery 的 each() 函數用於循環遍歷目標 jQuery 對象的每個元素——包含一個或多個 DOM 元素的對象，並公開所有 jQuery 函數。它對於多元素 DOM 操作以及迭代任意數組和對象屬性非常有用。
除了此函數外，jQuery 還提供了一個同名輔助函數，無需事先選擇或創建任何 DOM 元素即可調用。
jQuery.each() 語法
讓我們看看不同模式的實際應用。
以下示例選擇網頁上的每個 <div> 元素，並輸出每個元素的索引和 ID：
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>// DOM 元素
$('div').each(function(index, value) {
console.log(`div${index}: ${this.id}`);
});</pre><div class="contentsignin">登入後複製</div></div><div class="contentsignin">登入後複製</div></div>
<p>可能的輸出結果為：</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code>div0:header
div1:main
div2:footer</code></pre><div class="contentsignin">登入後複製</div></div><div class="contentsignin">登入後複製</div></div>
<p>此版本使用 jQuery 的 <code>$(selector).each() 函數，而不是實用函數。
下一個示例顯示了實用函數的使用。在這種情況下，要循環遍歷的對像作為第一個參數給出。在此示例中，我們將展示如何循環遍歷數組：
// 数组
const arr = [
'one',
'two',
'three',
'four',
'five'
];
$.each(arr, function(index, value) {
console.log(value);
// 将在 "three" 后停止运行
return (value !== 'three');
});
// 输出：one two three在最後一個示例中，我們想演示如何迭代對象的屬性：
// 对象
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所有這些都歸結為提供適當的回調函數。回調函數的上下文 this 將等於其第二個參數，即當前值。但是，由於上下文始終是一個對象，因此必須包裝原始值：
$.each({ one: 1, two: 2 } , function(key, value) {
console.log(this);
});
// Number { 1 }
// Number { 2 }這意味著值和上下文之間沒有嚴格的相等性。
$.each({ one: 1 } , function(key, value) {
console.log(this == value);
console.log(this === value);
});
// true
// false第一個參數是當前索引，它是數字（對於數組）或字符串（對於對象）。
讓我們看看 jQuery.each() 函數如何與 jQuery 對象結合使用。第一個示例選擇頁面中的所有 a 元素並輸出它們的 href 屬性：
$('a').each(function(index, value){
console.log(this.href);
});第二個示例輸出網頁上的每個外部 href（假設僅使用 HTTP(S) 協議）：
$('a').each(function(index, value){
const link = this.href;
if (link.match(/https?:\/\//)) {
console.log(link);
}
});假設頁面上有以下鏈接：
<a href="https://www.php.cn/link/9a4b930f7a36153ca68fdf211c8836a7">SitePoint</a> <a href="https://www.php.cn/link/235fba44e32ba4dd3a3f72db1a8a6846">MDN web docs</a> <a href="https://www.php.cn/link/60c4a88bac6125d490af523a8c94e5e1">Example Domain</a>
第二個示例將輸出：
// DOM 元素
$('div').each(function(index, value) {
console.log(`div${index}: ${this.id}`);
});我們應該注意，來自 jQuery 對象的 DOM 元素在其傳遞給 jQuery.each() 的回調函數中的“原生”形式。原因是 jQuery 事實上只是 DOM 元素數組的包裝器。通過使用 jQuery.each()，此數組的迭代方式與普通數組相同。因此，我們不會開箱即用地獲得包裝的元素。
關於我們的第二個示例，這意味著我們可以通過編寫 this.href 來獲取元素的 href 屬性。如果我們想使用 jQuery 的 attr() 方法，我們需要像這樣重新包裝元素：$(this).attr('href')。
讓我們再看看如何處理普通數組：
<code>div0:header div1:main div2:footer</code>
此代碼段輸出：
// 数组
const arr = [
'one',
'two',
'three',
'four',
'five'
];
$.each(arr, function(index, value) {
console.log(value);
// 将在 "three" 后停止运行
return (value !== 'three');
});
// 输出：one two three這裡沒有什麼特別的。數組具有數字索引，因此我們獲得從 0 開始到 N-1 的數字，其中 N 是數組中元素的數量。
我們可能有更複雜的數據結構，例如數組中的數組、對像中的對象、數組中的對像或對像中的數組。讓我們看看 jQuery.each() 如何在這種情況下幫助我們：
// 对象
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 }我們使用嵌套調用 jQuery.each() 來處理嵌套結構。外部調用處理變量 colors 的數組；內部調用處理各個對象。在此示例中，每個對像只有一個鍵，但通常可以使用此代碼處理任意數量的鍵。
此示例演示如何循環遍歷分配了類 productDescription 的每個元素（在下面的 HTML 中給出）：
$.each({ one: 1 } , function(key, value) {
console.log(this == value);
console.log(this === value);
});
// true
// false我們使用 each() 輔助函數而不是選擇器上的 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。這些只是幫助確定我們當前正在迭代哪個 DOM 元素的參數。此外，在這種情況下，我們還可以使用更方便的 each 方法。我們可以這樣寫：
<a href="https://www.php.cn/link/9a4b930f7a36153ca68fdf211c8836a7">SitePoint</a> <a href="https://www.php.cn/link/235fba44e32ba4dd3a3f72db1a8a6846">MDN web docs</a> <a href="https://www.php.cn/link/60c4a88bac6125d490af523a8c94e5e1">Example Domain</a>
我們將在控制台中獲得：
<code>https://www.php.cn/link/9a4b930f7a36153ca68fdf211c8836a7 https://www.php.cn/link/235fba44e32ba4dd3a3f72db1a8a6846 https://www.php.cn/link/60c4a88bac6125d490af523a8c94e5e1</code>
請注意，我們正在將 DOM 元素包裝在一個新的 jQuery 實例中，以便我們可以使用 jQuery 的 text() 方法來獲取元素的文本內容。
在下一個示例中，當用戶單擊 ID 為 5demo 的元素時，所有列表項將立即設置為橙色。
const numbers = [1, 2, 3, 4, 5];
$.each(numbers, function(index, value){
console.log(`${index}: ${value}`);
});在索引相關的延遲（0、200、400……毫秒）之後，我們將元素淡出：
<code>0:1 1:2 2:3 3:4 4:5</code>
結論
在這篇文章中，我們演示瞭如何使用 jQuery.each() 函數迭代 DOM 元素、數組和對象。這是一個強大且節省時間的函數，開發人員應該將其納入自己的工具包中。
如果 jQuery 不是您的首選，您可能需要考慮使用 JavaScript 原生的 Object.keys() 和 Array.prototype.forEach() 方法。還有一些像 foreach 這樣的庫，可以讓您迭代類數組對像或字典式對象的鍵值對。
請記住：$.each() 和 $(selector).each() 是以兩種不同方式定義的兩種不同方法。
(本文已於2020 年更新，以反映當前最佳實踐，並更新結論中關於使用現代JavaScript 的原生解決方案的建議。要了解更多JavaScript 知識，請閱讀我們的書籍《JavaScript ：從新手到忍者，第二版》)
關於 jQuery each() 函數的常見問題
jQuery 中 .each() 函數的用途是什麼？ jQuery 中的 .each() 函數用於迭代 DOM 元素集合，並對每個元素執行特定操作。
如何在 jQuery 中使用 .each() 函數？您可以通過使用 jQuery 選擇器選擇一組元素，然後在該選擇上調用 .each() 來使用 .each() 函數。您提供一個回調函數，該函數定義要對每個元素執行的操作。
與 .each() 一起使用的回調函數的參數是什麼？回調函數接受兩個參數：index（集合中元素的當前索引）和 element（正在迭代的當前 DOM 元素）。
如何在 .each() 回調函數中使用 index 參數？您可以使用 index 參數來跟踪集合中當前元素的位置，這對於條件操作或其他操作非常有用。
.each() 函數的一些常見用例是什麼？常見的用例包括迭代元素列表以操作其屬性、值或樣式，以及對集合中的每個元素執行自定義操作。
以上是5 jQuery.EACH（）功能示例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
