Question

Here’s the HTML:

<div id="star" class="star1">
<div id="star" class="star2">
<div id="star" class="star3">
<div id="star" class="star4">
<div id="star" class="star5">
</div>
</div>
</div>
</div>
</div>

And the Javascript:

$(document).ready(function() {

$('#star').click(function(e){

    e.stopPropagation();
    var class_name = $(this).attr('class');
    alert(class_name);
});

});

The problem I’m having is I’m only ever getting the class of the first parent div.
I want get the class from whichever div is being clicked on. Is there a way of doing this?

Answer 1

The ids of html element should be unique. Assign unique ids and use class selector and assign common class to group them.

Live Demo

<div id="star1" class="star">1
<div id="star2" class="star">2
<div id="star3" class="star">3
<div id="star4" class="star">4
<div id="star4" class="star">5
</div>
</div>
</div>
</div>
</div>​

$('.star').click(function(e){

    e.stopPropagation();
    var id = $(this).attr('id');
    alert(id);
});

The approach you are using is not correct but some time you are bound to use such false patterns if it is so you can do it this way.

Live Demo

$('[id=star]').click(function(e){

    e.stopPropagation();
    var class_name = $(this).attr('class');
    alert(class_name);
});​