jQueryのeach()でHTML要素のループ処理を行う方法

ここでは、jQueryのeach()メソッドを用いて指定したHTML要素に対してループ処理を行う方法について見ていきます。

each()メソッドとは

each()メソッドは、指定したHTML要素や配列、オブジェクトに対してループ処理を行うメソッドです。
今回は指定したHTML要素に対してループ処理を行う方法について見ていきます。

$(function() {
HTML要素.each(function([インデックス番号, HTML要素]) {
処理
}
});

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

$(function() {
  $("li").each(function() {
    $(this).text("リスト");
  });
});

ここでは、それぞれの<li>のテキストを「リスト」と表示させるという内容になっています。
$(this)はそれぞれの繰り返しで対象となる要素のことですね。

では結果を見てみましょう。

こうですね。
ちゃんと、それぞれの<li>要素に対して「リスト」というテキストが生成されていますね。

<ul>
  <li>リストA</li>
  <li>リストB</li>
  <li>リストC</li>
</ul>

$(function() {
  $("li").each(function(index, element) {
    $("p").append(
      index + ":" + $(element).text() + ", "
    );
  });
});

それぞれの<li>要素のインデックス番号(=index)と、要素(=element)のテキストをappend()メソッドを用いて<p>要素に追加していくという内容になります。

では、結果を見てみましょう。

こうですね。
一番下にそれぞれの<li>要素のインデックス番号とテキストが表示されていますね。

以上のように記述することでeach()メソッドを用いて指定したHTML要素に対してループ処理を実行させることができます。