Question

I have some div elements having class name hover, these div elements have parent divs having class name hoverparent but the id’s of these parent elements are different.

Is it possible to get the ID of respective .hoverparent element while hovering on my .hover div elements?

I tried to get this by:

$('.hoverparent').attr('id')

But it gives the same first parent id every time.

Structure is like:

<div class="hoverparent" id="hover-1">
<div class="hover">ABC</div>
</div>
<div class="hoverparent" id="hover-2">
<div class="hover">DEF</div>
</div>

Answer 1

You need to use the parent or closest functions to traverse up the DOM tree to find the “parent” element you are looking for:

$(".hover").hover(function() {
    var $parent = $(this).closest(".hoverparent");
    alert($parent.attr("id"));
});

The difference between parent and closest is that the first will only work if the .hoverparent element is the immediate parent of the .hover element; closest will search upwards through all ancestors to find it.