jQuery select ancestor

Question

Is is possible to use jQuery to select an ancestor of an element?

Markup:

<div id="ancestor-1">     <div>         <a href="#" class="click-me">Click me</a>     </div> </div> <div id="ancestor-2">     <div>         <a href="#" class="click-me">Click me</a>     </div> </div> 

Script:

$(".click-me").click(function(){     // var ancestorId = ???;     alert(ancestorId) }); 

Answer 1

Try parent() for the immediate parent element.

$(".click-me").click(function() {   var ancestor = $(this).parent();   alert(ancestor) }); 

Or parents() for all matching ancestor elements.

$(".click-me").click(function() {   var ancestors = $(this).parents(".some-ancestor");   alert(ancestors) }); 

Or closest() for the first closest matching element (either an ancestor or self).

$(".click-me").click(function() {   var ancestor = $(this).closest(".some-ancestor");   alert(ancestor) }); 

The difference between parents() and closest() is subtle but important. closest() will return the current element if it's a match; parents() returns only ancestors. You many not want the possibility of returning the current element. closest() also only returns one element; parents() returns all matching elements.

Answer 2

You mean something like this?

$('.click-me').click(function() {     var $theAncestor = $(this).closest('#ancestor-1'); } 

This will search through all ancestors until a match is found.

http://api.jquery.com/closest/

EDIT:

Jerome, your question can be interpreted several ways. This speaks to the power and flexibility of jQuery.

Please consider the following.

First, to answer your question, yes, it is possible to use jQuery to select an ancestor of an element.

I think we can assume that you are aware of jQuery's ability to select any element, whether ancestor or descendant via:

$('#myElement') 

Given the click-me example, if you would like to have a set of all of an element's ancestors returned, use:

$(this).parents() 

or

$(this).parents(selector) 

But be aware that this will traverse through ALL ancestors returning all, or all that match when a selector is given.

If you would like to have the immediate parent returned, use:

$(this).parent() 

If you know which ancestor you need, use:

$(this).closest(selector) 

But be aware that it will only return the first match, and if the current element (this) is a match, it will return that.

I hope this helps.