jQuery: each()メソッド

each()メソッドは、指定したすべての要素に対して関数を実行します。
each()メソッドから起動される関数には、「インデックス番号」と「該当要素」の２つの引数があります。

each() 書式


$(セレクタ).each(関数);

関数部分を細かく見ると、引数の有無によって3通りあります。


// 引数なし
$(セレクタ).each(function(){処理内容});

// 引数１つ
$(セレクタ).each(function(インデックス番号){処理内容});

// 引数２つ
$(セレクタ).each(function(インデックス番号, 該当要素){処理内容});

each() コード例

次のようなボタンとリストがあるHTMLに対してeach()メソッドを３通り使用してみます。


<button>click</button>
<ul>
    <li><a href=""></a>リストA</li>
    <li><a href=""></a>リストB</li>
    <li><a href=""></a>リストC</li>
</ul>

① 引数なしの場合

引数に何も指定しない場合は、「this」を使って該当要素を取得します。


$('button').on('click', function(){
    $('li').each(function(){
        str = $(this).text();
        console.log(str);
    })
});

② 引数: インデックス番号の場合

ここでは「i」でインデックス番号を取得し、thisで該当要素を取得しています。 もちろんインデックス番号の引数はiでなく任意の変数名で構いません。


$('button').on('click', function(){
    $('li').each(function(i){
        str = i + '番目: ' + $(this).text();
        console.log(str);
    })
});

③ 引数: インデックス番号,該当要素の場合

この場合は「i」でインデックス番号を取得し、「elem」で該当要素を取得します。


$('button').on('click', function(){
    $('li').each(function(i, elem){
        str = i + '番目: ' + $(elem).text();
        console.log(str);
    })
});

each()メソッドを使う場合と、使わない場合

each()メソッドを使うのは、指定した全ての要素に対して処理を行いたい場合です。 但し、「全ての要素に対して同じ処理をする場合」は使う必要がありません。

先程と同じようにボタンとリストのあるHTMLで考えて見ます。

例えば、「ボタンが押された時に、リストの全ての要素の文字色を赤にする場合」は、 each()メソッドは必要ありません。コードは次のようになります。


$('button').on('click', function(){
    $('li').css('color', 'red');
});

次に、「ボタンが押された時に、リスト全てのインデックス番号とテキスト内容を取得し、何かしらの処理をする場合」は、 each()メソッドを使う必要があります。


$('button').on('click', function(){
    $('li').each(function(i){
        // i でインデックス番号を取得
        // $(this).text() でテキスト内容を取得
        // 処理内容
    })
});

このように、ケースに応じてeach()を使う必要がある場合と、使う必要がない場合があります。

jQuery入門