Question

I have some HTML blocks look like

<li id="item261">
    <div class="itemdesc">
      <a class="icon-hide">Hide</a>
    </div>
</li>

And i have a jquery like

$(document).ready(function()
{
$('.icon-hide').click(function(){
          var elemId = $(this).parent().attr("id");         
    });
});

I need the ID of the “li” tag on click of “.icon-hide”. how can i achive this? any help..

Answer 1

I’d suggest:

$('.icon-hide').click(function(){
    var elemId = $(this).closest('li').attr('id');
});

This is because parent() as implied in the name of the method looks at the parent of the element returned by the selector (the parent is the div); whereas closest() continues up the ancestor tree to match the first selector passed to the method.

You could, instead, use parents(), however the important difference between closest() and parents() is that closest() returns zero or one match, whereas parents() will continue all the way to the root element and return every match it finds, so it can return zero, one or many matches.

Another difference is that parents() starts searching from the current element’s parent, whereas closest() starts with the current element itself, so it’s quite easily possible, using closest() for the method to return the current/$(this) element itself.

References:

• closest().
• parent().
• parents().