jQuery：ループ内で作成されたアイテムを選択する

Question

初心者質問：私はページにいくつかの要素を配置するループを持っていますが、IDを参照するときは最初のものだけを選択できます。誰かがアイテムにホバー機能を適用する方法を教えてもらえますか？

私はドットのページを達成しようとしています。ここでは、それぞれのページがぼんやりしています。現時点では、最初のドットを選択すると、それはちょうど乾いたままになり、他のどれも応答しません。前もって感謝します！

var dots = ''; 

for (i = 0; i < 100; i++) { 
    dots += '<div id="dot" class="blue">&nbsp;</div><div id="dot" class="red">&nbsp;</div><div id="dot" class="grey">&nbsp;</div>'; 
} 
//insert all 
$('body').append(dots);         

// dot hover 
$('#dot').hover(function() { 
    $(this).stop().fadeOut(200); 
     }, function() { 
    $(this).stop().fadeIn(400); 
}); 

});  

Answer 1

idが、各ページ内で一意である必要があります属性がありますが$('#dot')は最初のものだけを見つける理由です、それを繰り返しています。 HTML4は、これは言っている：

ID = 名 [CS]は
この属性は、要素に名前を割り当てます。この名前は、ドキュメント内で一意である必要があります。

そしてHTML5：

値は、要素のホームサブツリー内のすべてのIDの中でユニークである必要があり、少なくとも一つの文字が含まれている必要があります。

あなたは代わりにクラスを使用する必要があります。

var dots = ''; 
for (i = 0; i < 100; i++) { 
    dots += '<div class="dot blue">&nbsp;</div><div class="dot red">&nbsp;</div><div class="dot grey">&nbsp;</div>'; 
} 
//insert all 
$('body').append(dots);         

// dot hover 
$('.dot').hover(
    function() { $(this).stop().fadeOut(200) }, 
    function() { $(this).stop().fadeIn(400) } 
); 

Answer 2

あなたは少しこの

// dot hover 
$('div').hover(function() { 
    $(this).stop().fadeOut(200); 
     }, function() { 
    $(this).stop().fadeIn(400); 
}); 

OR

var dots = ''; 

for (i = 0; i < 100; i++) { 
    dots += '<div id="dot" class="blue dot">&nbsp;</div><div id="dot" class="red dot">&nbsp;</div><div id="dot" class="grey dot">&nbsp;</div>'; 
} 
//insert all 
$('body').append(dots);         

// dot hover 
$('.dot').hover(function() { 
    $(this).stop().fadeOut(200); 
     }, function() { 
    $(this).stop().fadeIn(400); 
}); 

});