jQuery の $().each() で個別処理(ループ)

jQuery の $().each() で個別処理(ループ)

こんにちは、やっと地上デジタル放送がうちのテレビに映るようになりました。tanakaです。液晶テレビはもう1年前に買っていたので、ついにフルパワーを発揮しているんですが、新品みたいです。

今日はjQuery の each の使い方についてとりあげます。

jQuery はループ処理を意識しなくても使える

jQuery がよく使われるJavaScriptライブラリである理由のひとつに、CSSライクに、宣言的な記述ができる、ということをあげることができます。複数の要素に同じスタイルを適用したいとき、CSSではループ処理を書く必要がありませんが、jQuery も基礎的な使い方ではループを意識しなくても書くことができます。

$('p').css('background-color', 'yellow'); // すべての p 要素の背景色を黄色にする
$('p').prepend('Oh! '); // すべてのパラグラフの前で 'Oh! 'とつける

このように、複数の要素に対し同じ処理を書くのは簡単です。それでは、同じようにして、 パラグラフの前に、パラグラフの文字数を添えたいときはどうすればいいでしょうか?
一括で $('p').prepend('30文字で〜す '); とやるわけにはいきません。このようなときに使えるのが、 $().each() メソッドです。選択した要素たちに対して、個別に処理していくループを書くことができます。 たとえば、パラグラフの文字数を添えるときは、次のように書きます。

jQuery('p').each(function(i){
    var l;
    l = jQuery(this).text().length;
    jQuery(this).prepend('['+ l +'文字で〜す] ');
});

少し複雑ですが、each メソッドを使うと、jQuery で選択した要素にカスタマイズした処理を かけることができます。

jQuery('p').each(function(i){
    // それぞれの p 要素に対する処理を書く
});

ところで、「それぞれの p 要素」についてはjQuery('p')といった感じで指定できません。 eachメソッドの中で一つ一つの p 要素を取得するには this を使います。 ただし、ここでの this は素のDOM Elementオブジェクトなので、jQueryのメソッドを使うために、jQuery(this) と囲みます。これで、それぞれの p 要素にたいして、jQueryが使えます。

ループなのでインデックス使えます

eachはループ処理なので、インデックスを利用することもできます。 'function(i){ ...' と書かれていて、ループの中では i がインデックスとして利用できます。

まとめ

  • $().each() でループ処理
  • 選択した要素に対して、個別の状況に応じた処理が書ける
  • eachの中では、個別の要素は this, 選択した要素の中で何番目かは、 i を使う

今度は $().map() について紹介したいと思います。

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ