jQuery.each()で配列・オブジェクトを反復処理する方法

ここでは、jQuery.each()メソッドを用いて配列やオブジェクトに対して反復処理を行う方法について説明していきたいと思います。

jQuery.each()とは

jQuery.each()メソッドは、指定した配列・オブジェクトのそれぞれの要素に対して反復処理を行うことのできるメソッドです。

jQuery.each()の書き方

配列に対して用いる場合

jQuery.each(配列, function(インデックス, 値) {処理});

オブジェクトに対して用いる場合

jQuery.each(オブジェクト, function(プロパティ名, 値) {処理});

jQuery.each()を用いた例

配列に対して用いる場合

HTML

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

jQuery

$(function() {
  let arr = ["A", "B", "C"];
  jQuery.each(arr, function(index, val) {
    $("li").eq(index).text("リスト" + val);
  });
});

※HTML要素.eq(インデックス)は、複数のHTML要素の中から指定したインデックスに該当する要素を取得するメソッドです。

結果

オブジェクトに対して用いる場合

HTML

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

jQuery

$(function() {
  let i = 0;
  let obj = {"apple":"リンゴ", "banana": "バナナ", "orange": "オレンジ"};
  jQuery.each(obj, function(prop, val) {
    $("li").eq(i).text(prop + " → " + val);
    i++;
  });
});

結果

まとめ

以上のように、jQuery.each()を用いることで、配列やオブジェクトのそれぞれの要素に対して反復処理を行うことができます。