.eachファンクションがいまいちピント来ない

Question

.eachファンクションは各繰り返し処理で実行したい関数を指定します。

http://js.studio-kingdom.com/jquery/traversing/each

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

ただ繰り返し複数の要素に何かを当てるなら、セレクタを複数の要素にしたら同じように思えるのですが、どう違うのでしょうか？

Answer 1

セレクタにより複数のタグ（？）を掴んだ場合、任意の値を参照してもいずれか１つしか
参照できないでしょう。
eachは全データを走査してすべての値を参照することができます。

#sample

<script>
$(function(){
  console.log($('input').val()); //ヒットするのは最初のvalue

  $('input').each(function(){ //セレクターで指定した全データを参照
    console.log($(this).val());
  });
});
</script>
<input type="text" value="x">
<input type="text" value="y">
<input type="text" value="z">

Comments

[退会済みユーザー]

難しくて初心者にはわからないのですが、もう少し初心者にもわかるようにお願いできますか？

[yambejp]

タイミング悪くsample追記してあるのですが、sampleみてもわかりませんか？

[退会済みユーザー]

＞＞＞
$(function(){
console.log($('input').val()); //ヒットするのは最初のvalueのみということですが、
inputとしているのになぜすべてのinputにならないのでしょうか？

これをeachにするとすべて当たるのですね。

[yambejp]

.val()などは象徴的ですが、prop()にしてもattr()にしても結局
参照時にもどってくるのは１つの値だけで
セレクタが複数のオブジェクトを掴んだ場合は、所定の１つのデータだけで
そういう仕様ですからしかたありません

上記だけをみてもeachの有効性は理解できると思います。

[退会済みユーザー]

返り値がある場合複数のinputに当たるように記載しても一番上の要素しか値を返してくれない仕様ということでしょうか？

.cssでcolorを変えたりする場合はすべてにあたるので、すべてに同じように当たると思ったのですが、attrなどの一部メソッドは.cssとちがいすべてに当たらないので、
eachを使って、何度もval()をinput要素の数分繰り返して、すべての値を取得するしか方法がないのでそのような場合に使うということですかね？

もしそうなら、関数ごとにこの関数はeachを使わないといけないのか調べる必要がありそうですね。
cssとはやはり根本式に仕様が違うのですね。
cssはドノプロパティもすべての要素に当たりますが。

[yambejp]

「参照」に関しては戻り値は１つです。
値の代入や変更については全てのセレクタに適用されます

[退会済みユーザー]

返り値がある場合複数のinputに当たるように記載しても一番上の要素しか値を返してくれない仕様ということでしょうか？

また、値がどうなっているかなどを取得して確認する参照の場合は一番上だけなので、
すべて見たい場合にeachを使うということですね。

その他の値の代入や変更については全てのセレクタに適用されるので、eachを使うことはないということですね。
つまりこの関数はeachを使うのではなく度の関数でも値の代入や変更をするならeachを使うと行う行動で使う使わないが決まるということでしょうか？

[yambejp]

ちょっとニュアンスがわからないですが
セレクタが複数のオブジェクトをつかむ可能性がある以上
eachを使用しないとユーザーが必要な全てのデータを参照することができないということです

[Lhankor_Mhy]

> 一番上の要素しか値を返してくれない仕様ということでしょうか？

横からすみません。
ドキュメントに明確に書いてありますので、そちらを参照した方がいいですね。

> Get the current value of * the first element * in the set of matched elements or set the value of * every matched element *.
http://api.jquery.com/val/

[退会済みユーザー]

val()
全ての要素のvalue属性を返す。

jQuery1.2では、最初の要素だけではなく全てのvalue属性を返すようになった。複数選択可能なselectボックスなどでは、値は配列として返す。旧バージョンではFormプラグインのfieldValue関数として実装されていた動作。

日本語だとこちらですか？

関数によって違うのでしょうか？
それともやくわりによって違うのでしょうか？

eachを使うのか、セレクタで複数の要素をしてもいいのか区別方法がわかりません。

[退会済みユーザー]

$(function eachtest2 () {
$('textarea').each(function() {
console.log($(this).val());
});
});

$(function eachtest1 () {
const eachtest = $('textarea').val();
console.log(eachtest);
});

違う結果が出たので確かに後者だと一番上のtextareaしか実行されていないのはわかりました。

[Lhankor_Mhy]

うーん？
バージョンによって異なるというのは初耳ですね。
一応、CDNで1.2を試してみましたが、やっぱり最初の要素だけでしたね。1.2のリリースノートにもそのようなことは書いていないような？
http://semooh.jp は更新止まって久しいので、今は参照しない方がいいですよ。

[退会済みユーザー]

確かにこのサイトにあった情報ですが日本語のリファレンスはここしかないですよね。
すでにオワコンjqueryなので止まってしまっているのでしょうか？

とりあえずjqueryのバージョンは関係ないことはわかったのですが、
するとどう区別するのでしょうか？

メソッドことですか？
やりたいこと次第ですか？

[Lhankor_Mhy]

ドキュメントを読んで何を返してくるか確認すればいいのでは？

参考までにどうぞ。
http://api.jquery.com/?s=%22the+first+element+in+the+set+of+matched+elements%22