Best way to find out if element is a descendant of another
I am in the process of implementing jQuery, and taking out Prototype libraries in my codebase, and I am wondering if you could give me the best way to implement this functionality in jQuery.
I am familiar with the jQuery ancestor>
descendant syntax, but just want to check if an element is a descendant by true of false, like the code below:
can someone give me the most efficient jQuery solution for this ?
<div id="australopithecus">
<div id="homo-herectus">
<div id="homo-sapiens"></div>
</div>
</div>
$('homo-sapiens').descendantOf('australopithecus');
// -> true
$('homo-herectus').descendantOf('homo-sapiens');
// -> false
In jQuery 1.6, you can use the following code generically, e.g. targetElt and parentElt can both be DOM elements or jQuery-wrapped objects, as well as selectors:
$(targetElt).closest(parentElt).length > 0
Some of the other answers require you to refer to elements by their IDs, which isn't useful if all you have is a DOM element without an ID. Also, if you want to make sure that the targetElt is a strict descendant of parentElt (in other words, you don't want to count parentElt as its own descendant), make sure to add a targetElt != parentElt
check before your call to .closest()
, or use .parents().find()
as Jonathan Sampson suggests.
JQuery
With jQuery >=1.4 (2010) you can use the very fast function jQuery.contains()
This static method works with DOM elements, not with jQuery elements and returns true
or false
.
jQuery.contains( container, descendant )
Example: To check if a element is in the document you could do this:
jQuery.contains( document.body, myElement )
Native DOM
There is also a native DOM method Node.contains() that all browsers since ie5+ supports. So you can do it without jQuery:
document.body.contains( myElement )
I would think you could take advantage of CSS style selection here, with returned length..
$('#australopithecus #homo-sapiens').length // Should be 1
$('#homo-sapiens #homo-herectus').length // Should be 0
Not exactly true/false, but checking 0/1 as a boolean should work. :)
Alternately, you could do something like $('#parent').find('#child') and check the length there.
How about
$("#homo-herectus").parents().is("#australopithecus");
You can use the is()
function like so:
alert($('#homo-sapiens').is('#australopithecus *'));
// -> true
alert($('#homo-herectus').is('#homo-sapiens *'));
// -> false