THE HAM MEDIA BLOG

jQueryを使い要素の出てくる順に番号をつける方法(forの代わりにeach()を使う繰り返し)

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
FOR
Each
jquery

forの代わりにeach()

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



今回の簡単仕組み説明

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

ulのliに適応させてみる

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

■スクリプト

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

■プレビュー

  • li
  • li
  • li
  • li
  • li

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

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

tableのtdに適応させてみる

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

■スクリプト

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

■プレビュー

TH1 TH2 TH3 TH4 TH5 TH6 TH7 TH8
1−1 1−2 1−3 1−4 1−5 1−6 1−7 1−8
2−1 2−2 2−3 2−4 2−5 2−6 2−7 2−8
3−1 3−2 3−3 3−4 3−5 3−6 3−7 3−8
4−1 4−2 4−3 4−4 4−5 4−6 4−7 4−8
5−1 5−2 5−3 5−4 5−5 5−6 5−7 5−8
6−1 6−2 6−3 6−4 6−5 6−6 6−7 6−8
7−1 7−2 7−3 7−4 7−5 7−6 7−7 7−8
8−1 8−2 8−3 8−4 8−5 8−6 8−7 8−8

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

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

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

■スクリプト

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

■プレビュー

TH1 TH2 TH3 TH4 TH5 TH6 TH7 TH8
1−1 1−2 1−3 1−4 1−5 1−6 1−7 1−8
2−1 2−2 2−3 2−4 2−5 2−6 2−7 2−8
3−1 3−2 3−3 3−4 3−5 3−6 3−7 3−8
4−1 4−2 4−3 4−4 4−5 4−6 4−7 4−8
5−1 5−2 5−3 5−4 5−5 5−6 5−7 5−8
6−1 6−2 6−3 6−4 6−5 6−6 6−7 6−8
7−1 7−2 7−3 7−4 7−5 7−6 7−7 7−8
8−1 8−2 8−3 8−4 8−5 8−6 8−7 8−8

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

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



この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。