FacebookLinkedInTweet更新日期： 2025 年 3 月 9 日
本文為 jQuery 基本介紹系列文，第 7 篇：
如何使用jQuery CDN 建立互動網頁
初學者指南：掌握 jQuery DOM 操作技巧
初學者指南：深入了解 jQuery 選擇器
使用jQuery 刪除第一個子元素的實作教學
初學者指南：深入了解 jQuery 事件處理
如何在jQuery 中使用事件監聽器addEventListener
了解jQuery 中$().each(function(){}) 與$.each() 的差異 👈進度
jQuery 與fetch 的非同步請求方法介紹
初學者指南：掌握 jQuery 動畫效果
初學者指南：深入了解 jQuery 中的 this 關鍵字
初學者指南：深入了解 jQuery .offset() 方法
在 jQuery 中，迴圈是非常常見的操作，特別是在處理陣列或物件資料時。
我們可以使用 $().each(function(){}) 和 $.each() 這兩種方式來遍歷元素或資料結構，但它們有一些不同的適用情境和功能。
本文將詳細介紹這兩者的差異，以及應用情境和用法。
$().each(function(){}) 方法
$().each() 是 jQuery 用於遍歷選取的 DOM 元素集合的方法。
它會遍歷 jQuery 所選取的元素集，並針對每個元素執行一次指定的函數。
用法
$('.items').each(function(index, element) {
console.log('第' + index + '個元素：', element);
});
參數說明
index：當前元素在選取集合中的索引。
element：當前 DOM 元素的原生物件，可以用 $(element) 將其轉換為 jQuery 物件來使用 jQuery 方法。
適用情境
$().each() 通常用於需要遍歷網頁上的一組特定元素的情境。
例如，想要為網頁中所有 .items 類別的元素設置樣式、文字內容或監聽事件時，可以使用 $().each() 來進行批量操作。
範例
以下範例會對頁面上的每個 .items 元素加上藍色邊框：
$('.items').each(function(index, element) {
$(element).css('border', '1px solid blue');
});
在這裡，$('.items') 是選取所有 .items 類別的元素，並在 .each() 的回呼函數中為每個元素設置 CSS 樣式。
$.each() 方法
$.each() 是 jQuery 提供的通用迴圈方法，用來遍歷 陣列或物件 的項目。
與 $().each() 不同的是，$.each() 可以用於任何陣列或物件，而不僅限於 DOM 元素。
用法
$.each(arrayOrObject, function(indexOrKey, value) {
console.log('索引或鍵：' + indexOrKey, '值：' + value);
});
參數說明
arrayOrObject：要遍歷的陣列或物件。
indexOrKey：當前元素的索引（若為陣列）或鍵（若為物件）。
value：當前索引或鍵對應的值。
適用情境
$.each() 用於需要遍歷非 DOM 資料的情境，如陣列或 JSON 資料物件。
它更適合處理複雜資料結構，特別是需要逐一處理每個項目的資料操作。
範例
以下範例遍歷一個包含物件的陣列，並將每個物件的內容顯示在控制台：
var dataArray = [
{ name: 'Item 1', price: 100 },
{ name: 'Item 2', price: 200 }
];
$.each(dataArray, function(index, item) {
console.log('第 ' + index + ' 項目：名稱 = ' + item.name + ', 價格 = ' + item.price);
});
在這裡，我們用 $.each() 來遍歷 dataArray 陣列的每個項目，並訪問每個物件中的屬性。
$().each() 與 $.each() 的主要差異
特性$().each(function(){})$.each(parentData, function(){})主要用途遍歷 jQuery 選取的 DOM 元素遍歷任意的陣列或物件適用範圍jQuery 元素集合陣列或 JSON 物件參數index（索引）、element（原生 DOM）indexOrKey（索引或鍵）、value（值）典型使用情境操作多個選取的網頁元素，如批量設置樣式等遍歷非 DOM 資料（如陣列、物件資料）
範例對比
$().each(function(){}) 範例：對所有 .item 元素應用紅色背景色。
$(".item").each(function (index, element) {
$(element).css("background-color", "red");
});
$.each() 範例：遍歷陣列資料並在控制台輸出每個項目。
const colors = ["red", "green", "blue"];
$.each(colors, function (index, color) {
console.log("顏色索引：" + index + ", 顏色：" + color);
});
應用注意
$().each() 適用於操作頁面中的一組元素，例如設置樣式、監聽事件或批量添加內容。
$.each() 更通用，適用於處理各種非 DOM 的資料結構。特別是當遍歷 JSON 資料時，$.each() 是更合適的選擇。
總結
$().each(function(){}) 和 $.each() 在 jQuery 中的迴圈操作有不同的應用場景。
前者適用於遍歷 jQuery 選取的 DOM 元素集合，後者則更適合遍歷陣列或物件資料。
了解這兩種方法的區別，可以根據需求選擇合適的迴圈方式，讓程式碼更具可讀性和可維護性。