【jQuery】複数の要素に対して繰り返し処理をする（each・for）

HTMLで特定の要素を全て取得して回したい場合はJavaScriptなどで繰り返し処理をしますが、jQueryを使った場合の方法をまとめます。

対象としてはこのようなHTMLの場合です。

<div class="comment">コメント1</div>
<div class="comment">コメント2</div>
<div class="comment">コメント3</div>
...

.each()メソッド

jQueryで繰り返しといえばeach()メソッドです。基本的な構文は以下の通り。

$('セレクタ').each(function(index, element){ 〜 });

第1引数には各要素のインデックス番号が、第2引数には繰り返し処理中の要素が参照されます。2つの引数はどちらも省略可能です。このメソッドを使えば要素数分、繰り返して指定した関数を実行してくれるわけですね。簡単！

第1引数と第2引数を指定

第2引数はElement型なので、DOM Element として使いたい場合はそのまま、jQueryオブジェクトとして使いたい場合は$( )をつけます。

$(".comment").each(function(i, elem) {
    console.log(i + ': ' + $(elem).text());
});

第1引数のみ指定

第2引数を指定してない場合に処理中の要素を取得する場合はthisを使います。

$(".comment").each(function(i) {
    console.log(i + ': ' + $(this).text());
});

引数を省略

インデックス番号が欲しい場合は別途カウントしましょう。まぁ素直に引数指定すればいいですね。

var i = 0;
$(".comment").each(function() {
    console.log(i + ': ' + $(this).text());
    i++;
});

jQuery.each()メソッド

上述したeach()メソッドは jQuery オブジェクトに対してのみ使用できますが、こちらの場合は普通の配列や jQuery オブジェクトでないものも扱えますので汎用的です。

$.each(array, function(index, value) { 〜 });

引数(array)には配列やオブジェクトを渡します。コールバック関数の引数は基本的にはeach()メソッドと同じです。

普通の配列を指定

普通の配列を指定した場合は、コールバック関数の第1引数にはインデックスが、第2引数には値が取得されます。

var arr = [ "apple", "orange", "grape" ];
$.each(arr, function(i, val) {
    console.log(i + ': ' + val);
});

オブジェクトを指定

オブジェクトを指定した場合は、コールバック関数の第1引数にはKEYが、第2引数には値が取得されます。

var obj = { 1:"tokyo", 2:"nagoya", 3:"osaka" };
$.each(obj, function(i, val) {
    console.log(i + ': ' + val);
});

jQueryオブジェクトを指定

こちらも jQuery オブジェクトを指定することも出来ます。

$.each($(".comment"), function(i, val) {
    console.log(i + ': ' + $(val).text());
});

breakとcontinue

for文の繰り返し制御は break と continue ですが、each()メソッドの場合は以下の通り。

$(".comment").each(function(i, elem) {
    if (i == 1) {
        return true;    // continue
    } else {
        return false;    // break
    }
});

ただし、continue に関しては break に合わせてあえてreturn trueにしましたが、これ実は false 以外ならなんでもいいんですよね。jQuery のソースを見てみるとこんな感じになってます。

if ( value === false ) {
    break;
}

よく continue はreturn trueだと書いてあるのを見ますが、returnだけでもreturn 1でもreturn nullでも大丈夫です。

for文を使う

classの要素数が可変のためfor文で回すためには要素数を取得しないといけません。ここでは.lengthを使います。そうするとfor文の書き方はこんな感じに。

for (var i=0; i<$(".comment").length; i++) {
    $(".comment").eq(i).〜
}

.length又は.size()メソッド

.lengthでjQueryオブジェクトのエレメント数を取ってきます。これは.size()メソッドと戻り値が同じです。sizeメソッドの中身を見てみるとlengthを返してるのがわかります。

console.log($(".comment").size);
 -> function (){return this.length}

.eq()メソッド

複数のエレメントから指定したポジションのエレメントを取得できます。引数はゼロからlength-1までです。順番に関してはDOMの構築順(要は上から数える)になります。また、セレクタでeqを指定する事も可能です。

$(".comment:eq(1)").css("color", "blue");

ただしこの書き方だと定数で指定する事になりますので変数iを使う場合は

$(".comment:eq(" + i + ")").css("color", "blue");

と書く必要があります。見た目が悪いので.eqメソッドのがいいですね。

参考サイト

eq - jQuery日本語リファレンス
 length - jQuery日本語リファレンス

TASK NOTES