【jQuery】each()で要素をループ処理する

JavaScript
2026.05.23

こんにちは、かつコーチです。

「複数の要素に同じ処理をしたいけど、1つずつ書くのは面倒…」と感じたことはありませんか。

jQueryには、選択した要素をひとつずつ取り出して処理してくれるeach()というメソッドがあります。

この記事では、each()の基本的な書き方から、配列・オブジェクトへの使い方、for文との違いまで、初心者向けに分かりやすく解説します。

読み終わる頃には、リストや複数のボタンをまとめて処理するコードが書けるようになります。

each()の基本の書き方

基本構文

each()は、jQueryで選択した要素の集合に対して、1つずつ繰り返し処理を行うメソッドです。

メソッドとは、オブジェクトに対して呼び出せる処理のことです。

基本の書き方は以下の通りです。

$('セレクタ').each(function(index, element) {
  // indexには0から始まる連番が入る
  // elementにはDOM要素（生のHTML要素）が入る
});

具体的な例を見てみましょう。

以下のようなリストがあるとします。

<ul id="fruit-list">
  <li>りんご</li>
  <li>みかん</li>
  <li>ぶどう</li>
</ul>

このリストの各項目に連番を追加してみます。

$('#fruit-list li').each(function(index, element) {
  // $(element)でjQueryオブジェクトに変換してから操作する
  $(element).text((index + 1) + '. ' + $(element).text());
});

実行すると、以下のように表示が変わります。

1. りんご
2. みかん
3. ぶどう

thisキーワードを使う書き方

each()の中では、thisを使ってその時点の要素を参照することもできます。

$('#fruit-list li').each(function(index) {
  // thisは生のDOM要素を指す
  $(this).css('color', 'green');
});

thisは関数の中で「今処理している要素」を指すキーワードです。

第2引数のelementを使うかthisを使うかは好みで選んで問題ありません。

私はthisのほうがコードが短くなるので、こちらをよく使います。

配列・オブジェクトへの適用

each()はDOM要素だけでなく、配列やオブジェクトのループ処理にも使えます。

// 配列の場合
const fruits = ['りんご', 'みかん', 'ぶどう'];

$.each(fruits, function(index, value) {
  console.log(index + ': ' + value);
});
// 0: りんご
// 1: みかん
// 2: ぶどう

配列やオブジェクトを処理する場合は、$('セレクタ').each()ではなく$.each()という書き方になります。

似ているようで違うメソッドなので、混同しないよう注意してください。

オブジェクトの場合も同様です。

const profile = {
  name: 'かつコーチ',
  job: 'エンジニア',
  hobby: '筋トレ'
};

$.each(profile, function(key, value) {
  console.log(key + ': ' + value);
});
// name: かつコーチ
// job: エンジニア
// hobby: 筋トレ

よくあるつまずきポイント・エラー対処

thisをjQueryオブジェクトと勘違いする

each()の中のthisは、jQueryオブジェクトではなく生のDOM要素です。

このため、いきなりjQueryのメソッドを呼び出そうとするとエラーになります。

❌ Before（つまずいた書き方）

$('#fruit-list li').each(function() {
  this.text('置き換え');
  // TypeError: this.text is not a function
});

私も初めてeach()を使ったとき、このエラーで15分ほど詰まりました。

コンソールに表示されたUncaught TypeError: this.text is not a functionというメッセージを見て、「textメソッドがないなんておかしい」と混乱したのを覚えています。

原因は、thisが生のDOM要素であり、jQueryのメソッドを持っていないことでした。

✅ After（正しい書き方）

$('#fruit-list li').each(function() {
  $(this).text('置き換え');
  // $()で囲むことでjQueryオブジェクトに変換する
});

$(this)のように$()で囲むことで、jQueryオブジェクトに変換してからメソッドを呼び出せます。

falseを返してもループが止まらない

each()の途中でループを止めたい場合、breakのような書き方は使えません。

❌ Before（つまずいた書き方）

$('#fruit-list li').each(function(index) {
  if (index === 1) {
    break;
    // SyntaxError: Illegal break statement
  }
});

each()はコールバック関数（関数を引数として渡す仕組み）を使ったループなので、break文はそのままでは使えません。

✅ After（正しい書き方）

$('#fruit-list li').each(function(index) {
  if (index === 1) {
    return false;
    // returnにfalseを渡すとループが止まる
  }
  console.log(index);
});
// 0のみ出力される

each()のループを途中で止めたいときは、コールバック関数の中でreturn falseを書きます。

returnだけ（値なし）の場合はその回だけスキップし、次のループに進む点も覚えておくと便利です。

応用・一歩先の使い方

each()はネスト（入れ子）にして使うこともできます。

たとえば、複数のリストがあり、それぞれの中の項目を処理したい場合です。

$('.category').each(function() {
  const $category = $(this);

  $category.find('li').each(function(index) {
    $(this).attr('data-index', index);
  });
});

外側のeach()で大きなグループを、内側のeach()でそのグループ内の要素を処理する構成です。

また、each()の戻り値はjQueryオブジェクト自身なので、メソッドチェーン（メソッドを.でつなげて続けて呼び出す書き方）の途中に組み込むこともできます。

$('#fruit-list li')
  .each(function(index) {
    $(this).attr('data-index', index);
  })
  .css('cursor', 'pointer');

for文とどちらを使うべきか迷う場合は、jQueryオブジェクトに対して処理をするならeach()、単純な数値のループやパフォーマンスを重視するならfor文、という使い分けが基本です。

each()は内部で関数呼び出しが発生する分、大量データのループではfor文よりやや遅くなる傾向があります。

数千件以上を繰り返し処理するような場面では、for文への置き換えも検討してみてください。

まとめ

この記事のポイント

  • each()は選択した要素を1つずつ取り出して処理するメソッド
  • DOM要素には$('セレクタ').each()、配列・オブジェクトには$.each()を使う
  • コールバック関数内のthisは生のDOM要素なので、$(this)で変換してから使う
  • ループを途中で止めるにはreturn falseを使う（breakは使えない）

次に読むべき記事

  • メソッドチェーンの書き方と考え方
  • セレクタの書き方：$()の基本とCSSセレクタとの違い
  • 属性・データ属性の取得と操作（attr・data）

タグ: jQuery, 初心者向け, 基本文法

タイトルとURLをコピーしました