Question

Newbie question: I have a loop which places a number of elements on a page, but when I reference the IDs I can only select the first one. Can someone tell me how I can apply the hover function to the items?

I am trying to achieve a page of dots, where each one fades in and out when hovered over. At the moment it just goes haywire when I select the first dot, and none of the others respond. Thanks in advance!

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 attributes must be unique within each page but you’re repeating them, that’s why $('#dot') only finds the first one. HTML4 has this to say:

id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.

And HTML5:

The value must be unique amongst all the IDs in the element’s home subtree and must contain at least one character.

You should be using a class instead:

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)  }
);