2016/7/20更新

jQueryのeach()メソッドの基本的な使い方

jQuery で複数のオブジェクトに対して繰り返し処理を行う場合は、each() メソッドを使用します。

each() メソッドは２種類あり、jQuery オブジェクトに対して繰り返し処理を行う jQuery.each() メソッドと、引数で指定したオブジェクトに対して繰り返し処理を行う $.each() メソッドがあります。

今回はそれぞれの each() メソッドの使い方について説明します。

jQuery.each() の使い方

jQuery オブジェクトに対して繰り返しを行う場合は、以下のように記述します。

jQueryオブジェクト.each(function(index) {
  繰り返し実行する処理
});)

jQueryオブジェクト.each(function(index) {

繰り返し実行する処理

});)

each() メソッドの引数にはコールバック関数を指定します。コールバック関数の第１引数を指定することによって、index を取得することができます。この引数は省略することも可能です。

以下は、複数のリストに対して each() メソッドを適用する例です。

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

$('li').each(function(index) {

$(this).text("リスト" + index);

});

このとき、this はそれぞれの繰り返しで対象となるリストの要素が代入されています。

$.each() は jQuery.each() と異なり jQuery オブジェクトだけでなく、配列やハッシュに対して繰り返し処理を行うことができます。

$.each() は以下のように記述します。

$.each(対象のオブジェクト, function(index, val) {
  繰り返し実行する処理
});)

$.each(対象のオブジェクト, function(index, val) {

繰り返し実行する処理

});)

each() メソッドの第１引数には繰り返しの対象となるオブジェクトを指定します。コールバック関数の第１引数には、ハッシュの場合はキーが代入され、配列の場合はインデックスが順番に代入されていきます。また、第２引数にはオブジェクトの値が順番に代入されていきます。

以下は、配列 array に対して繰り返し処理を行う例です。

array = ["Apple", "Orange", "Grape"];
$.each(array, function(index, val) {
  $('ul').append("<li>" + index + "：" + val + "</li>");
});

array = ["Apple", "Orange", "Grape"];

$.each(array, function(index, val) {

$('ul').append("<li>" + index + "：" + val + "</li>");

});

上の例では、1回目の繰り返しのときに index に 0 が代入され、 val に "Apple" が代入されます。２回目には index に 1、val に "Orange"、３回目には index に 2、val に "Grape" が代入されます。

each() メソッドは繰り返し処理する要素がなくなると自動的に終了します。

each() を途中で終了させる（いわゆる break 文を実行する）場合は、終了を行いたい箇所で return false を記述します。

each() の処理を次へジャンプさせる（いわゆる continue 文を実行する）場合は、ジャンプを行いたい箇所で return true を記述します。このとき、 return true の後に記述したコードは実行されません。

jQuery