jQuery 繰り返し処理 each
今回は、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>
実行結果
こんな感じに繰り返し処理ができます。上のプログラムでは、「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'); });
実行結果
他にも、色々使えるので、知っておくと便利です。
これで、終わります。