配列・要素のループ

配列のループ

配列をループさせる場合には、$.each()を使います。functionの１番目にインデックス、２番目に配列の値が入ってくるので処理に使うことができます。

var ary = [ "りんご", "みかん", "なし" ];
$.each(ary, function(index, val) {
	console.log(val);
});

このループは連想配列にも使えます。連想配列の場合、functionの１番目でキーを取得して利用することができます。

var ary = { red:"赤", green:"緑", blue:"青" };
$.each(ary, function(key, val) {
	console.log(key);
	console.log(val);
});

多次元配列にも対応することができます。多次元配列の場合、functionの２番目の値が配列で取得できます。

var ary = {
	"国語":{ a:100, b:90, c:30 },	
	"算数":{ a:80, b:100, c:60 },	
	"社会":{ a:40, b:60, c:100 },	
};
$.each(ary, function(key, val) {
	console.log(key + ":" + val.a + "点");
	console.log(key + ":" + val.b + "点");
	console.log(key + ":" + val.c + "点");
});

要素のループ

タグやクラスを指定して要素をループする方法です。functionの１番目でインデックス、２番目で要素を取得するので処理に使うことができます。

$("ul.class li").each(function(i, elem) {
    console.log(i + ': ' + $(elem).text());
});

JQueryでは要素の操作などは一括しておこなえるのでループをおこなう必要はありません。情報の取得などでループさせる必要がある場合は上記のループを利用してください。

//要素の一括操作
$("ul.class li").css('color', 'red');