jQueryのforとeachの変数参照の違い
jQueryを学習中の者です。
現在、パララックス効果のサンプルコードを参考にしているのですが、理解できずに困っています。
その内容は各ブロック要素をeachでループさせ、ループの中でウインドウのスクロールイベントを登録しコールバック関数で細かい設定をしていくというものです。
理解できないというのは、以前 javasctiptでのfor文による要素へのイベント登録で「イベントでも渡す関数は参照のみです。新たに関数を自動で作成してくれるような事は決してありません。」と説明が有り、コールバック関数内に変数を使うとイベント発生時に変数を参照した時、ループの最後で格納した値になるので、この事は理解し注意もするようにしていました。
しかし、今回のサンプルコードではforとeachの違いはあるけれど、コールバック関数に変数を使っているのに、その変数が別々の値を持っています。
最初はjQueryとjavascriptの挙動の違いかなと思い、以前のfor文のコードを下の様にjQueryで書き替えても結果は一緒でした。
取り留めの無い文章になってしまいましたが、どうして下の2つコードが違う結果になるのかを解り易く説明していただけませんでしょうか。
<table border="1">
<tr><td></td><td></td>...</tr>
...
</table>
<script>
(1)//これだと、駄目…どのtdのイベントでも最後のtdが反応
$(function(){
for(var i =0 ,len=$('td').length;i < len; i++){
var td=$('td').eq(i);
td.mouseover(function(){ td.css('background-color','red');});
td.mouseout(function(){ td.css('background-color','');});
}
});
(2)//これだとOK…ちゃんと各tdが反応する。
$(function(){
$('td').each(function(index,elem){
var td=$(elem);
td.mouseover(function(){ td.css('background-color','red');});
td.mouseout(function(){ td.css('background-color','');});
});
});
</script>
*今回の質問はどう対処したら良いのかという類ではありません。
両方とも変数 td にjqueryオブジェクトを格納して、同じ形式でイベント登録しているのに違う結果になるという事が壁に成ってます。
ネットでいくら調べても構文の説明やサンプルコードは溢れていますが、この様な事例に触れた物が皆無です。
forとeachの違いなんて基本的なことで恥ずかしいのですが、お願いします。
お礼
なるほどmultipleで数を明確にできるのですね。 大変参考になりました、ありがとうございました。