2011年5月31日火曜日

jQueryオブジェクトの子要素をjQueryオブジェクトのままループで処理する場合

ちょっとハマったのでメモ。

例えば、ある tbody (id="the_table") の直下にある tr 要素に対して何か操作をしたい場合、
各 tr 要素はjQueryオブジェクトのまま取得できた方が操作が楽です。

まずぱっと思いつくのは、jQueryに用意されている $.each() を使うこと。
次のようにまずセレクタでオブジェクトを取得します。

var lines = $("#the_table").children();

このとき、lines には tbody に関するjQueryのオブジェクトが入っています。
なので

$.each(
 lines, 
 function(i, line){
  …
 }
);

こうすると、 line の中には tr に関するjQueryオブジェクトが入っていると期待したのですが、
実際には <tr></tr> のような文字列が入るだけで動きません。

動くようにするには、for文でインデックスのループをまわしてやりながら eq() で取り出します。

for(var i=0; i < lines.length; i++) {
 var line = lines.eq(i);
}

これでOK!

ハッピー☆