eachメソッドを使った繰り返し処理[jQuery]

eachメソッドを使った繰り返し処理[jQuery] JavaScript

jQueryでの繰り返し処理は、JavaScriptと違った書き方をします。ここでは、eachメソッドについて見ていきましょう。

eachメソッドの書き方

jQueryのeachメソッドはHTML要素に対して用いる場合と、配列・連想配列に対して用いる場合では書き方が異なります。

HTML要素に対して繰り返し処理を行う場合

HTML要素に対して繰り返し処理を行う場合は、jQueryオブジェクトを使います。

$('セレクタ').each(コールバック関数);

コールバック関数の第一引数にはインデックスを、第二引数にはHTML要素をとります。引数は省略することも可能です。

例1
<ul>
  <li>monkey</li>
  <li>snake</li>
  <li>cow</li>
</ul>
$(function() {
  $('li').each(function(index, element) {
    console.log(index + '番の動物は' + $(element).text() + 'です。');
  });
});

/* 出力結果
0番の動物はmonkeyです。
1番の動物はsnakeです。
2番の動物はcowです。
*/

配列・連想配列に対して繰り返し処理を行う場合

配列や連想配列に対して繰り返し処理を行う場合は、$.each()を使用します。

$.each(配列(連想配列), コールバック関数);

コールバック関数の第一引数には、配列ならインデックス、連想配列ならキーが代入されます。第二引数には値が代入されます。

例2
$(function() {
  const array = ['monkey', 'snake', 'cow'];
  $.each(array, function(index, value) {
    console.log(index + '番の動物は' + value + 'です。');
  });
});

/* 出力結果
0番の動物はmonkeyです。
1番の動物はsnakeです。
2番の動物はcowです。
*/

中断とスキップ

jQueryにはbreak文やcontinue文がありません。中断させるには「return false」を、スキップさせるには「return true」を使用します。

例3
$(function() {
  const array = ['monkey', 'snake', 'cow'];
  $.each(array, function(index, value) {
    if(index === 1) return false;
    console.log(index + '番の動物は' + value + 'です。');
  });
});

/* 出力結果
0番の動物はmonkeyです。
*/
例4
$(function() {
  const array = ['monkey', 'snake', 'cow'];
  $.each(array, function(index, value) {
    if(index === 1) return true;
    console.log(index + '番の動物は' + value + 'です。');
  });
});

/* 出力結果
0番の動物はmonkeyです。
2番の動物はcowです。
*/

まとめ

  • HTMLにはjQueryオブジェクト
  • 配列・連想配列には$.each()
  • 中断はreturn false、スキップはreturn true

以上がeachメソッドの基本的な書き方です。

あなたの毎日がハッピーでありますように。

コメント

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