Selecting multiple id's and hovering using jquery each() and hover()

Please kindly take a look at this code. I'm selecting all the element with the same ids, however, only the first element changes color, when you hover on the other elements, their color remain the same. Not sure if I'm doing it the right way.. Please kindly offer suggestions.

A life demo is here -> http://jsfiddle.net/bwoodlt/2ReCe/

    $(document).ready(function(){
        $("#ade").live("hover", function(){
            $("#ade").each(function (){
            $(this).toggleClass('highlight');
           // alert("In here..")
        });

        });
    });

Update:

Thanks Guys! I did use the class selector, it selects all the elements on-hover! What I really want is for it to select each element on hover, then as I proceed to the next element, that should change the color rather than selecting all the element and changing their color when one item is hovered!

Answers


As already stated, IDs must be unique. Also, your code doesn't make sense anyway. When you hover over any div, you loop through every other div, and apply the highlighted class to each div. Surely you only want to add the highlighted class to the hovered div? In that case, drop the .each(). And don't use .live(), it's deprecated. Use .hover() if you need to, or if you need delegated events, use .on().

$(".ade").hover(function(){
    $(this).toggleClass('highlight');
});

jsFiddle: http://jsfiddle.net/2ReCe/2/


It's illegal in HTML to have more than one element with a given ID. $('#ade') uses getElementById and returns only one element.

Use a class for this case. $('.ade') will return all elements having class ade.


You should only use an ID on one element. jQuery will only select the first element with the ID given. Use a class for multiple.


Need Your Help

Why won't my XPages replicate?

xpages replication lotus-domino database-replication

Have a database where I created some XPages. I wanted to move to another server for testing, so I made a replica of the database in the usual way. Then I went to the test server and created some new

In LWUIT, Component of another Form are not display

java-me lwuit

I am new on J2me developer using LWUIT library. I am making two forms: one is MainMidlet.java and another is UpgradeApp.java. Problem is that whatever the component add on UpgradeApp.java the compo...