.eachファンクションは各繰り返し処理で実行した

質問

.eachファンクションは各繰り返し処理で実行したい関数を指定します。
http://js.studio-kingdom.com/jquery/traversing/each

ということですが、クリックを繰り返すと色が変わったり戻ったりという、
繰り返し処理をしたい時に使うメソッドなのでしょうか？
JSです。

回答No.1

bya00417 · ベストアンサー

＞　クリックを繰り返すと色が変わったり戻ったりという、繰り返し処理をしたい時に使うメソッドなのでしょうか？

違います。
リンク先の例に書かれているように、HTML内に複数の <li> タグがある状況で「$('li')」というセレクタを使用すると、jQuery は全ての <li> 要素を配列として用意します。
その配列に入っている個々の <li> 要素に対して処理を行う場合、本来なら配列の中身を1つずつ取り出して順に処理しなければいけない所を「$('li').each( ... )」と言う形で処理を指定すると全ての <li> 要素に対して処理を実行してくれます。

お礼

＞＞＞
「$('li').each( ... )」と言う形で処理を指定すると全ての <li> 要素に対して処理を実行してくれます。

cssで例えると.eachは
li {
処理
}
のようにそのページ内のすべてのli要素を処理してくれる？当たる？ということでしょうか？

「$('li').click( ... )」などeachでない場合。

cssで例えると.eachは
li.only-this {
処理
}
のようにそのページ内のすべてのli.only-this要素しか処理してくれれない？当たる？ということでしょうか？
つまりそのたliは処理しない。

＞＞＞
本来なら配列の中身を1つずつ取り出して順に処理しなければいけない
li.only-this1
li.only-this2
li.only-this3
と一つずつ処理しないといけないというのは上記のようなイメージですか？

＞＞＞
HTML内に複数の <li> タグがある状況で「$('li')」というセレクタを使用すると、jQuery は全ての <li> 要素を配列として用意します。

documentオブジェクトにそのページ内のliがすべて配列として入っているということですか？

補足

$(function() {
$('p').each(function() {
$(this).css('color', 'red');
});
})();

$(function() {
$('p').css('color', 'red');
})();

上記二つとも同じ結果になりました。

回答No.2

bya00417

＞　上記二つとも同じ結果になりました。

その内容なら同じ結果になるでしょう。
.each() のメリットは、each 内の処理で $this で各要素を特定して処理が行えるので、そのタグ内のHTMLに基づいて処理を変えるとか、タグについている属性情報に応じて処理を変えるといった個別処理が可能になる点です。

お礼

liのこの属性の物だけcssを買えるということができるのですか？