HTMLの数ぶん要素を取得したいときや、配列に格納してある要素ぶん、処理を繰り返したいとき使うのがjQueryの「each()」。
「each()」を使った処理の繰り返し方法をデモを使いながら見ていきましょう。
HTML上の要素ぶん繰り返すとき
このデモでは、HTMLのリストの数だけ処理をくりかえします。
下のHTMLからindex番号と要素を「each()」で取得し繰り返します。
HTML
<ul class="demo1"> <li>彗星</li> <li>金星</li> <li>地球</li> </ul>
jQuery
$(".demo1 li").each(function(i,e) {
console.log(i + "番は" + $(e).text() + "。\n");
});
結果
0番は彗星。 1番は金星。 2番は地球。
「each()」で取得する時、「i」にはインデックス番号が入っており
「e」にはHTML要素（<li>彗星</li>など）が入っています。
それをコンソールログでテキストを付けたし表示しています。
さらにクラス、IDの有無で条件を設定したり、HTML要素の中身で条件を分岐したり色々な指定ができる便利な「each()」。
次は配列数ぶん繰り返すときの処理を見てみよう。
配列の数だけ繰り返すとき
次は、配列の数ぶん処理を繰り返します。
下の配列から、配列番号と要素を「each()」で取得し配列数ぶん繰り返します。
jQuery
var wakusei = ["彗星", "金星", "地球"];
$.each(wakusei, function(i,v) {
console.log(i + "番は" + v + "。\n");
});
結果
0番は彗星。 1番は金星。 2番は地球。
HTML要素を取得する時と同様に「i」にはインデックス番号が格納されており
「v」には、配列の値が格納されます。
それをコンソールログでテキストを付けたし表示しています。
結果はHTMLの時と同じだけど、配列とHTMLでは「each()」の書き方が少し違ってくる。
HTML要素の場合は、「$(“HTML要素”).each(function() {});」で
配列の場合は、「$.each(配列名, function() {});」になる。
なんか感覚的には「配列名.each(function() {});」こう書いてもイケそうだけど、これだとダメみたい。
配列から要素を取得する時は、いつもとちょっと違う書き方だったなぁ。と覚えとけば、要素を取得できなくて何時間も悩むことが無くなるはずです！
コメント