Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています（＾＾）　週末はレストランやコンビニのお菓子のことを書いています。

jQuery 繰り返し処理 each

jQuery

今回は、jQueryの「each」について書きます。


「each」は、繰り返し処理ができるメソッドです。
イメージは、forみたいな感じです。

こんな感じに使います。

1.

$('li').each(function(i){
	console.log(i + ' = ' + $(this).text() );
});

2.

<body>
	<ul>
		<li>a</li>
		<li>b</li>
		<li>c</li>
		<li>d</li>
		<li>e</li>
		<li>f</li>
		<li>g</li>
	</ul>

	<script>
		$(function(){
			$('li').each(function(i){
				console.log(i + ' = ' + $(this).text() );
			});
		});
	</script>
</body>

実行結果
f:id:gupuru:20140607155159p:plain

こんな感じに繰り返し処理ができます。上のプログラムでは、「li」に対して繰り返し処理をしています。

引数は、こんな感じです。

.each( function(index, Element) )

indexは、各要素のインデックス番号です。Elementは、繰り返し処理中の要素を参照します。



ここからは、eachの使用例みたいなものを軽く書きます。

・要素の数を測る
こんな感じにすれば、要素がいくつかあるか分かります。

var sum = 0;
$('li').each(function(i){
	sum = i;
});
console.log(sum);

・背景色を変える
背景色も、こんな感じにすれば一気に変えれます。

$('li').each(function(){
	 $(this).css('background', 'red');  
});

実行結果
f:id:gupuru:20140607160207p:plain


他にも、色々使えるので、知っておくと便利です。
これで、終わります。

参考サイト
.each() | jQuery 1.9 日本語リファレンス | js STUDIO