【jQuery】each()でDOM・配列・オブジェクトをループする完全ガイド｜$.each()との違いまで

jQueryの each() はDOM要素・配列・オブジェクトを繰り返し処理するためのメソッドです。本記事では .each()（jQueryオブジェクトメソッド）と $.each()（ユーティリティ関数）の違い、ループを途中で抜ける方法・バニラJSとの比較まで丁寧に解説します。

1. .each()でDOM要素をループ

jQueryオブジェクトの .each() は選択した要素を1つずつ処理します。コールバックには index（0始まりのインデックス）と element（DOM要素）が渡されます。

// 全ての li を順番に処理
$('ul li').each(function (index, element) {
  console.log(index, $(this).text());
  // index: 0, 1, 2...
  // $(this): 現在のjQueryオブジェクト
  // element: DOM要素（$(element)と$(this)は同じ）
});

// 各要素にインデックスを表示
$('.card').each(function (i) {
  $(this).find('.number').text(i + 1);
});

// 偶数・奇数で色分け
$('tr').each(function (i) {
  if (i % 2 === 0) {
    $(this).addClass('even-row');
  } else {
    $(this).addClass('odd-row');
  }
});

2. $.each()で配列・オブジェクトをループ

$.each() はjQueryのユーティリティ関数で、配列やオブジェクトを反復処理できます。.each() がjQueryオブジェクト専用なのに対し、$.each() は任意のデータに使えます。

// 配列のループ（index, value）
var fruits = ['リンゴ', 'バナナ', 'オレンジ'];
$.each(fruits, function (index, value) {
  console.log(index + ': ' + value);
  // 0: リンゴ / 1: バナナ / 2: オレンジ
});

// オブジェクトのループ（key, value）
var person = { name: '田中', age: 30, city: '東京' };
$.each(person, function (key, value) {
  console.log(key + ': ' + value);
  // name: 田中 / age: 30 / city: 東京
});

// Ajax結果を元にリストを生成
$.ajax({ url: '/api/items' }).done(function (data) {
  $.each(data, function (i, item) {
    $('<li>').text(item.name).appendTo('#list');
  });
});

3. ループを途中で抜ける（breakの代替）

each() の中で break は使えません。return false を返すことでjQueryのeachを中断できます。return true は continue（次の反復へ）と同じです。

$('li').each(function (i) {
  if ($(this).text() === '探している値') {
    console.log('見つかりました! インデックス:', i);
    return false;  // ← break の代わり（each全体を中断）
  }
  if ($(this).hasClass('skip')) {
    return true;   // ← continue の代わり（次の要素へスキップ）
  }
  // 通常の処理
  console.log($(this).text());
});

4. .each()と$.each()の違いまとめ

5. バニラJSとの比較

// DOM要素のループ: forEach（バニラJS）
document.querySelectorAll('li').forEach(function (el, i) {
  console.log(i, el.textContent);
});

// 配列のループ: for...of（バニラJS）
var fruits = ['リンゴ', 'バナナ'];
for (var fruit of fruits) {
  console.log(fruit);
}

// オブジェクトのループ: for...in（バニラJS）
var obj = { a: 1, b: 2 };
for (var key in obj) {
  console.log(key, obj[key]);
}

6. 実用パターン集

// パターン1: フォームの全入力値を収集
var formData = {};
$('input, select, textarea').each(function () {
  var name = $(this).attr('name');
  if (name) formData[name] = $(this).val();
});

// パターン2: テーブルの行データを配列に変換
var rows = [];
$('table tbody tr').each(function () {
  var row = [];
  $(this).find('td').each(function () {
    row.push($(this).text());
  });
  rows.push(row);
});

// パターン3: 外部リンクを自動的に新タブで開く
$('a').each(function () {
  var href = $(this).attr('href');
  if (href && href.startsWith('http')) {
    $(this).attr({ target: '_blank', rel: 'noopener noreferrer' });
  }
});

まとめ

jQueryの .each() はDOM要素のループに、$.each() は配列・オブジェクトのループに使います。ループを中断するには return false、スキップは return true です。モダン環境では forEach や for...of でも代替できます。

関連記事: jQueryのeq()で要素の順番を指定して選択する方法 / jQueryの.lengthプロパティで要素数をカウントする方法

よくある質問（FAQ）