.each()で繰り返し処理を実装しよう!

.each()で繰り返し処理を実装しよう!

.each()は、jQueryオブジェクトを反復し、各要素に対して関数を実行するメソッドです。

コールバック関数内で現在のDOM要素を取得することにより、繰り返し処理を実行できます。

.each()の使い方

<ul>
    <li>jQuery</li>
    <li>.each()</li>
    <li>example</li>
</ul>
$('li').each(function() {
    console.log($(this).text());
});

.each()には、繰り返し処理を行うコールバック関数を渡します。

現在のDOM要素を参照するthisを使用し、$(this)でjQueryオブジェクトを取得しています。

// コンソール出力
jQuery
.each()
example

$(this).text()により、jQueryオブジェクトのテキストを取得し、console.log()でコンソールに出力しています。

3度同じ記述をしなければならないところ、1度の記述で済みました。

サンプルでは処理が少ないですが、処理が長くなればなるほど、ソースコードの短縮に繋がります。

引数indexで順番を取得する

$('li').each(function(index) {
    console.log(index + ': ' + $(this).text());
});

引数のindexを参照することで、処理の順番を取得することができます。

最初の処理は1番目ではなく、0番目として表されることに注意します。

// コンソール出力
0: jQuery
1: .each()
2: example

サンプルでは、各要素の文字列にindexを追加してコンソールに出力しています。

最後の処理かを調べるには?

ループの回数から最後に与えられるindexを計算し、現在のindexと比較します。

indexは0から始まるので、例えば、ループの回数が3回であれば、最後のindexは2になります。

現在のindexが2であれば、最後の処理を実行している関数であるということです。

// jQueryオブジェクトをキャッシュ
let li = $('li');

// ループの回数を代入
let last_index = li.length - 1;

li.each(function(index) {
    if(index === last_index) {
        // 最後の処理
        console.log(index + ': ' + $(this).text());
    }
});

$(‘li’)をli変数にキャッシュした後、li.lengthでjQueryオブジェクトの個数を取得します。

この個数は、li.each()で実行されるループの回数と一致します。

.each()のindexは0番目から始まるため、ループの最後のindexは、ループ回数から1を引いたものになります。

ループ内でindexとlast_indexが一致した場合が最後の処理です。

// コンソール出力
2: example

サンプルでは、処理が最後の場合のみ、テキストをコンソールに出力しています。

breakはないの?ループを抜けるには?

.each()は関数を繰り返すメソッドなので、for文で使うようなbreakは使えません。

コールバック関数内でfalseを返すことにより、breakのような繰り返し処理の中止ができます。

$('li').each(function(index) {
    if(index > 1) {
        return false;
    }

    console.log(index + ': ' + $(this).text());
});

indexが1を超えた場合、繰り返し処理を抜けます。

// コンソール出力
0: jQuery
1: .each()

結果として、indexが2のテキストは出力されません。

continueはないの?処理を飛ばすには?

break同様、continueも使用できません。

繰り返し処理をスキップするには、関数であることを利用し、returnでコードの実行を停止します。

$('li').each(function(index) {
    if(index === 1) {
        return;
    }

    console.log(index + ': ' + $(this).text());
});
// コンソール出力
0: jQuery
2: example

falseを返すとループを抜けてしまうので、何も指定しないかfalse以外の値を返します。

構文ではなく、関数であることを意識しましょう。

thisと$(this)の違いは?

これまでのサンプルでは全て$(this)を使用しましたが、DOM要素のthisを使うこともできます。

jQueryの機能が不要な場合、thisを使用した方が高速です。

$('li').each( function() {
    console.log($(this).text());
    console.log(this.outerText);
});

$(this).text()とthis.outerTextは同じ内容を出力しますが、後者のほうが高速になります。

通常は気にしなくても問題ありませんが、ループ回数が多い場合、パフォーマンス向上のため、thisへの書き換えを検討しましょう。

配列で.each()を使うには?

記述の方法は違いますが、配列でも.each()を使用できます。

jQueryオブジェクトではないため、arr.each()としない点に注意しましょう。

var arr = ['jQuery', '.each()', 'example'];

$.each(arr, function(index, element) {
    console.log(index + ': ' + element);
});
// コンソール出力
0: jQuery
1: .each()
2: example

$.each()の第1引数に配列、第2引数にコールバック関数を渡します。

コールバック関数の第1引数は.each()のindexと同様、何番目のループかを表します。

第2引数には、indexに対応する配列の値が渡されます。

連想配列

var obj = {key1: 'jQuery', key2: '.each()', key3: 'example'};

$.each(obj, function(key, element) {
    console.log(key + ': ' + element);
});
// コンソール出力
key1: jQuery
key2: .each()
key3: example

$.each()の使い方は配列と同様です。第1引数に連想配列を渡します。

コールバック関数の第1引数には連想配列のキー、第2引数にはキーに対応する値が渡されます。

まとめ

  • jQueryオブジェクトの繰り返しには、.each()を使用します。
  • 引数のindexはループの順番が渡され、0番目から始まります。
  • breakはreturn false; continueはreturn;で実装できます。
  • thisはDOM要素、$(this)はjQueryオブジェクトです。
  • 配列、連想配列には、$.each(arr, function(index, element) { })を使用します。

メソッドカテゴリの最新記事