each()メソッド

セレクタで指定した要素を1つずつ順番に取り出して、それぞれの要素に対して「～処理～」の部分を繰り返し実行する。

each()の利用シーン

each()の基本構文は以下の通り。
eachに指定する関数は引数として「index（インデックス番号）」「element（HTML要素）」を取得でできる。

$("セレクタ").each(function(index, element){
　/* 処理 */
});

以下の例では、スライダーを実装したい要素のクラスを統一させ（ここでは .slider-container）、そのクラス名を使いまわしてスライダーを複数（1つでも可）実装させている。
こういったeach()を使った書き方であればコードがスッキリするし、オプションを指定する場合には複数個所を修正しなくてよくなるので効率的である。

$('.slider-container').each(function(){ //slickコンテナ全部に適用させて実行
  $(this).slick({
    autoplay: true,
    arrow: false,
    dots: true
  });
});

$.each()の利用シーン

jQueryのeach()関数には、$(セレクタ).each()ではなく、$.each()という使用方法もある。いわゆるセレクタを指定しないバージョンである。
セレクタを指定しないためDOM操作ではなく、よくJavaScriptの配列に用いられる。

$.each(配列・オブジェクト, function(index, value) {
  /* 繰り返し処理を記述する */
})

第1引数に処理を行いたい配列・オブジェクトを指定する。
第2引数には、繰り返し処理を行うための関数を指定するのはeach()と同様である。関数の引数には、「index（インデックス番号）」「value（値）」を取得することができる。

以下の例は、配列をループの中でDOM操作させる処理である。

let sampleArray01 = [1, 2, 4, 5, 8192];

$.each(sampleArray01, function(index, value) {
  $('#anyList').append(` // テンプレートリテラルはバッククォートで囲む
    <li>${index} : ${value}</li>
  `);
});

append()の「`」はバッククォートなので改行出来ていることに注意する。この記述方法はテンプレートリテラルという書き方である。
テンプレートリテラルを使うと${index}や${value}という記法で変数を呼び出すことが可能となる。

inserted by FC2 system