THE HAM MEDIA BLOG

今回、「jQuery Sequential List - Web Designer Wall」をみて、
eachがforと同じ動きをしているのを知った。
関数の中で数字の加算をしたら繰り返しのたびに増える…
まさにforの動きなのですが、なぜかこの発想、自分の中になくて
なんでこんなことに気づかなかったんだ〜って
なぜかショックを受けております。
ということで、いつものように試しにメモエントリーしておきます。

今回の簡単仕組み説明

今回使おうとしているのは、jQueryのeach
これはよく使うのですが、これがforのかわりになるなんて
なぜか思いつかなかった自分…(汗)
発想とかって、やっぱり必要なんだなって実感しております。

ulのliに適応させてみる

まずはシンプルにリストに適応させてみます。

■スクリプト

$("#testList li").each(function (i) {
  i = i+1;
  $(this).text('ＬＩ' + i);
});

■プレビュー

リスト内のテキストに「ＬＩ + ○」(○には数字)をいれてみました。
i = i+1;とすることで、はじめの数字を１にすることもできて、
しかもliの数、繰り返してくれるので、forなどの指定をする必要もない。

簡単にできるというのが、eachのメリットなのかなと思う。

tableのtdに適応させてみる

続いてtableのtdに適応させてみます。

■スクリプト

$("#testTable1 td").each(function (i) {
  i = i+1;
  $(this).text('ＴＤ' + i);
});

■プレビュー

単純にtdに指定するだけだと、td全部の数に適応される。
liに指定したのとかわらない。

tableのtrごとのtdに適応させてみる

先ほどのサンプルだと、td全部の数が繰り返されるが、
行ごとに１からスタートさせたいような時は一工夫必要だった。
下記のようにすれば実現可能となる。

■スクリプト

$("#testTable2 tr").each(function () {
  $(this).children().each(function (i) {
    i = i+1;
    $(this).not('th').text('ＴＤ' + i);
  });
});

■プレビュー

trごとの、さらにその中のtdごとにeachをかけるだけ。
このシンプルに、しかもそれぞれに繰り返せるなんて、
なんてシンプルで楽なんだ〜！

今回これを知れてよかった。今後の参考にしよう。