jQueryのeach()メソッドとは？仕組みと使い方を実例付きで解説

jQueryのeach()は、DOM要素を反復処理するための簡潔な方法です。each()メソッドは、対象となるjQueryオブジェクトに対して呼び出すように設計されています。jQueryオブジェクトとは、1つ以上のDOM要素を含み、jQueryのメソッドにアクセスできるオブジェクトのことです。each()を使えばエラーが発生しにくくなるだけでなく、複数のDOM要素の操作も格段にシンプルになります。

jQueryのeach()にはコールバック関数が必要です。コールバック関数とは、別の関数に渡され、後から実行される関数のことです。コールバック関数の中では、要素のインデックス番号と要素そのものにアクセスできます。

each()の使い方は、他のJavaScriptのループと同じくらい簡単ですが、混乱しやすいポイントもいくつか存在します。この記事では、そうしたポイントを解消しながら構文についても詳しく見ていきます。記事の最後には、jQueryのeach()をさまざまな形で活用するステップバイステップのコード例をご紹介します。

jQuery each()とは？

jQuery eachは、jQueryライブラリ専用のループメソッドです。JavaScriptのループと同じように動作し、DOM要素を反復処理します。jQueryのeach()にはコールバック関数が必要で、そのコールバック関数の中でDOM要素を操作することになります。

コールバック関数の本体では、条件分岐を使って選択した要素の一部を変更することも可能です。条件分岐とは、JavaScriptにおけるif…then文のことです。これにより、要素をどのように変更するかをより細かく制御できるようになります。

jQuery each()の構文

jQuery eachの呼び出し方には2つの方法があります。1つ目は、選択した要素に対して呼び出すメソッドとして使う方法です。コールバック関数は、最大2つの省略可能な引数を受け取ります。それが「index（インデックス）」と「value（値）」です。indexは現在の要素のインデックス番号を表し、現在の要素がリストの最初のものであれば0を返します。

value引数は現在の要素を指します。ここで重要なのは、valueにメソッドをチェーンするには、valueをjQueryセレクターでラップする必要があるという点です。それでは、これらを抽象的なコードにまとめて、構文を分解してみましょう。

$('div').each((index, value) => {
  console.log(`${index}: ${$(value).text()}`)
})

このコードでは、ページ上の各<div>を選択してループ処理を行っています。各反復処理の中で、現在の要素のインデックス位置と値にアクセスできます。ただし、単純に$(value)を出力するだけだと、おなじみの[object Object]という値が表示されてしまいます。

[object Object]はオブジェクトの文字列表現であることを覚えておきましょう。つまり、目的の値を取り出すにはメソッドを呼び出す必要があります。上記の例では、text()メソッドを使ってオブジェクトのテキスト属性を表示しています。

上記の例を実行すると、各<div>のインデックス番号とテキスト属性が順に出力されます。もしインデックスへのアクセスが必要ない場合は、次のようにコードを書き換えることもできます。

$('div').each(function() {
  alert($(this).text())
})

このように書いても、現在の<div>要素のテキストが出力されます。このコールバック関数のスコープ内では、キーワードthisも、先ほどvalue変数が参照していた要素と同じものを指します。なお、アロー関数内ではキーワードthisにアクセスできない点に注意してください。

アロー関数は関数を書くためのコンパクトな代替手段ですが、thisキーワードをバインドしません。言い換えると、アロー関数内でthisを使った場合に返されるオブジェクトは、function記法で書いた場合のthisが返すものとは異なるのです。

jQuery each()の実例

それでは、上記の構文例を発展させて、いくつか属性を追加してみましょう。まず、さまざまなクラスに属する色のリストを、基本的なHTMLで表現します。

<div class="colorSelect">Red</div>
<div>Pink</div>
<div class="color">Orange</div>
<div class="colorSelect">Purple</div>
<div class="colorSelect">Blue</div>

これにより、各テキスト要素がDOMに描画されます。まずは、アロー関数と従来の関数の両方を使って、テキストをコンソールに出力するところから始めましょう。

$('.colorSelect').each((index, value) => {
  console.log($(value).text())
})

クラス名がcolorSelectの<div>のみを選択することで、Red、Purple、Blueというテキストが出力されます。valueを新しいjQueryインスタンスでラップして、jQueryのtext()メソッドを呼び出している点に注目してください。こうすることで、選択された<div>要素のテキストだけがきれいに返されます。

続いて、同じ結果を今度はキーワードthisを使って取得してみましょう。

$('.colorSelect').each(function() {
   console.log($(this).text())
})

コールバックとしては、名前を持たない関数である「無名関数」を使用できます。ここでも、Red、Purple、Blueというテキストが返されます。アロー関数にもjQueryである程度の機能がありますが、jQueryのコールバックには従来のfunction記法を使うのがベストプラクティスである点は押さえておきましょう。

これで要素のコレクションを反復処理する方法がわかりました。次は、実際に色を変更してみて、each()の面白さを体感しましょう。

<div class="colorSelect">Red</div>
<div>Pink</div>
<div class="color">Orange</div>
<div class="colorSelect">Purple</div>
<div class="colorSelect">Blue</div>

<div class='result'>

</div>

<style>
  .colorSelect {
    color: blue;
  }
  
  .green {
    color: green;
  }
</style>

引き続き色のリストのページを使い、<style>要素にいくつかのクラスを追加しました。

この例では、クラスcolorSelectを持つ<div>に青色を割り当てています。さらに一歩進んで、条件分岐を使って、選択された3つのうち2つだけを緑色に変更してみましょう。

$('.colorSelect').each(function() {
  if ($(this).text() !== "Purple") {
    $(this).toggleClass('green')
  }
})

クラスセレクターに一致する<div>に対してeach()を呼び出しました。そして、条件分岐を使って、選択された各要素のテキストプロパティが「Purple」かどうかを確認しています。条件文の本体には、thisがもう一度登場します。

条件文の本体にあるthisが参照しているのは、条件を満たすテキスト属性そのものです。出力結果から、条件文の本体のthisが「Red」と「Blue」というテキスト属性を参照していたことがわかります。

「Red」と「Blue」は「Purple」と等しくないため、jQueryのtoggleClassメソッドを使って元のクラスをgreenクラスに変更できたのです。jQueryのtoggleClass()についてさらに詳しく知りたい方は、専用の解説記事を参照することをおすすめします。

まとめ

このガイドでは、多くの内容を取り上げました。まず、jQueryのeach()が、対象がjQueryオブジェクトであることを除けば、他のJavaScriptのイテレータと非常によく似た動作をすることを学びました。次に、構文のベストプラクティスや、アロー関数と従来のfunction記法に関する注意点についても解説しました。

実例を通じて、アロー関数は便利ながらも限定的であることが確認できました。余計なトラブルを避けるためにも、jQueryのコールバックにはすべて従来のfunction記法を使うことをおすすめします。

さらに、テキスト属性の色を実際に変更してみることで、each()ループの本体で条件分岐を使えば、条件を満たす要素だけを選択して変更できることもわかりました。

あとは、新しく身につけたjQueryのループパターンを練習あるのみです。小さなコードから始めて、jQueryのeach()がどこまでできるのか、ぜひじっくり探ってみてください。