Question

I have displayed a row of items with same div class name but different div IDs

I’m trying to use jquery to capture the different IDs when i hover over the items. But right now, each item I’m hovering over, I’m only getting the latest ID and not that specific ID I when I hover.

This is my php:

while($row = mysql_fetch_array($sql)){
$id = $row['id'];
echo "<div class='row'><div class='a' id='a_".$id."'>do something</div></div>";
}

Assume, that this will have 10 rows, and each row of divs will have unique IDs

Then this is my jquery:

 $('.row').hover(function(){
    var a = $('.a').attr('id');
    alert(a);
    }, function(){

});

Can someone help me figure out why I’m only getting the latest ID (all being the same), and not different ID’s?

Thanks!

Answer 1

Change

var a = $('.a').attr('id');

to

var a = $('.a', this).attr('id');

The reason you’re only getting the last ID with the former is that your query doesn’t specify any context, meaning you’re searching the entire document for a classes. When using the attr() method on a multi-element jQuery object, it will only return the attribute from the last one.

Demo here – http://jsfiddle.net/h7QDX/