The best way to find out if an element is a descendant of another

Question

I am implementing jQuery and taking out Prototype libraries in my codebase, and I wonder if you can give me a better way to implement this function in jQuery. I am familiar with the syntax of the jQuery descendant ancestor > descendant, but just want to check if the descendant element is the true false value, for example, the code below: can anyone 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 

Answer 1

I would think that you can take advantage of the CSS style selection here with the returned length.

 $('#australopithecus #homo-sapiens').length // Should be 1 $('#homo-sapiens #homo-herectus').length // Should be 0 

True / false is not true, but checking 0/1 as a boolean should work. :)

Alternatively, you can do something like $ ('# parent'). Find ('# child') and check the length there.

Answer 2

In jQuery 1.6, you can use the following code in the general case, for example. targetElt and parentElt can be either DOM elements or jQuery wrapped objects, as well as selectors:

 $(targetElt).closest(parentElt).length > 0 

Some of the other answers require you to reference elements by their identifiers, which is not useful if all you have is a DOM element without an identifier. In addition, if you want to make sure that targetElt is a strict descendant of parentElt (in other words, you do not want to consider parentElt as your own descendant), be sure to add the check targetElt != parentElt before calling .closest() , or use .parents().find() as suggested by Jonathan Sampson.

Answer 3

With jQuery> = 1.4 (2010) you can use the very fast jQuery.contains () function

This static method works with DOM elements, not jQuery elements, and returns true or false .

 jQuery.contains( container, descendant ) 

Example. To check if an element is in the document, you can do this:

 jQuery.contains( document.body, myElement ) 

Update:

There is also a native DOM Node.contains () method that supports all browsers since it supports ie5 +. This way you can do it without jQuery:

 document.body.contains( myElement ) 

Answer 4

What about

 $("#homo-herectus").parents().is("#australopithecus"); 

Answer 5

You can use the is() function as follows:

 alert($('#homo-sapiens').is('#australopithecus *')); // -> true alert($('#homo-herectus').is('#homo-sapiens *')); // -> false 

Answer 6

 $.fn.descendantOf = function(element) { element = $(element)[0]; var current = this; var body = document.body; while (current && current != element && current != document.body) { current = $(current).parent()[0]; } if (typeof(current) == "undefined" || typeof(current) == "null") { return false; } else if (current == element) { return true; } else if (current == document.body) { return false; } } 

Example:

 <div id="foo"> <div id="bar"> <div id="baz"></div> </div> </div> 

and

 $('#foo').descendantOf('#bar'); // false $('#foo').descendantOf('#foo'); // false $('#foo').descendantOf(document.body); // true $('#bar').descendantOf('#foo'); // true $('#baz').descendantOf('#foo'); // true 

Answer 7

You can try .find() on the .children() element

 $("#lucy").find("#homo-erectus").length; 

Or in the opposite direction:

 $("#homo-erectus").parents().find("#lucy").length; 

Answer 8

The best method I've found is using Dan G. Switzer, II method: http://blog.pengoworks.com/index.cfm/2008/9/24/Using-jQuery-to-determine-if-an- element-is-a-child-of-another-element

 jQuery.fn.isChildOf = function(b){ return (this.parents(b).length > 0); }; 

Then you just use the plugin like:

 $('homo-sapiens').isChildOf('australopithecus'); // -> true $('homo-herectus').isChildOf('homo-sapiens'); // -> false 

Answer 9

An alternative to closest (), which uses (almost) the same principle of movement and does not include the element itself: child.parentsUntil(ancestor).last().parent().is(ancestor) .

 var child = $('#homo-sapiens'); var ancestor = $('#australopithecus'); console.log(child.parentsUntil(ancestor).last().parent().is(ancestor)); // true 

Answer 10

 function descendantOf(parentId, childId) { return ( $('#'+parentId+' > #'+childId).length === 1 ); } 

That should work.

As stated in the comment below, if you do not want these to be just direct descendants:

 function descendantOf(parentId, childId) { return ( $('#'+childId, $('#'+parentId)).length === 1 ); } 

Answer 11

Suppose to rewrite the original operator in:

 $('#homo-sapiens').descendantOf('#australopithecus'); 

try the plugin:

 (function($) { $.fn.descendantOf = function(parentId) { return this.closest(parentId).length != 0; } })(jQuery)