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() について紹介したいと思います。