了解 jQuery 中 $().each(function(){}) 與 $.each() 的差異

更新日期： 2024 年 11 月 6 日

在 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() 的主要差異

範例對比

1. $().each(function(){}) 範例：對所有 .item 元素應用紅色背景色。

$(".item").each(function (index, element) {
  $(element).css("background-color", "red");
});

2. $.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 元素集合，後者則更適合遍歷陣列或物件資料。

了解這兩種方法的區別，可以根據需求選擇合適的迴圈方式，讓程式碼更具可讀性和可維護性。