I have a specific id ("mysubid"), now I want to check if this element (this id) is in a child path of an other id ("mymainid").

Is there an easy way to do this or will I go upwards, element by element, to see if the element is in a child path.

By child path I am talking about something like this:

A > B > C > D

So D is in the Child Path of A,B and C

I have a specific id ("mysubid"), now I want to check if this element (this id) is in a child path of an other id ("mymainid").

Is there an easy way to do this or will I go upwards, element by element, to see if the element is in a child path.

By child path I am talking about something like this:

A > B > C > D

So D is in the Child Path of A,B and C

• javascript
• jquery

Share Improve this question Follow asked Sep 24, 2010 at 14:41 ChrisChris 4,4851111 gold badges5252 silver badges7171 bronze badges 2

• 3 A more correct way to express this: Is mymainid an ancestor of mymsubid?. Or vice versa: Is mysubid an descendant of mymainid?. – Felix Kling Commented Sep 24, 2010 at 15:04
• 1 Thank you, yes that was what I tried to ask. I will remember these vocabularies for the next time. – Chris Commented Sep 24, 2010 at 15:18

Add a comment  | 

7 Answers 7

Sorted by: Reset to default 11

You all are making this very complicated. Use the descendant selector:

if ($('#mymainid #mysubid').length) {
    // #mysubid is inside #mymainid
}

var isInPath = $("#mysubid").closest("#mymainid").length > 0;

  if( $("#mymainid").find("#mysubid").length > 0 )

if($('#mysubid','#mymainid').length)
{

}

This will check to see if #mysubid is within #mymainid

jQuery( selector, [ context ] )

• selector: A string containing a selector expression
• context: A DOM Element, Document, or jQuery to use as context

This is a just an overlaod for $('#mymainid').find('#mysubid').lentgh btw, verified from: http://github.com/jquery/jquery/blob/master/src/core.js#L162

On another note, using a method such as $('#a #b') resorts to using the Sizzle Selector witch is slower than doing $('#a',$('#b')), witch uses purely javascript's getElementById

Note: as jQuery returns an empty object by default if the selection is not found you should always use length.

If you want to see the entire chain as an array use elm.parentNode and work backwards. So, to answer your question (and the depth or distance between the elements) in POJ, you can use:

var doc = document,
child = doc.getElementById("mysubid"),
parent = doc.getElementById("mymainid"),
getParents = function (elm) {
    var a = [], p = elm.parentNode;
    while (p) {
        a.push(p);
        p = p.parentNode;
    }
    return a;
};
getParents(child).indexOf(parent);

I tried on various browsers and the DOM function below is between 3 to 10 times faster than the selector methods(jQuery or document.querySelectorAll)

    function is(parent){
        return {
            aParentOf:function(child){
                var cp = child.parentNode;
                if(cp){
                    return cp.id === parent.id ? 
                       true : is(parent).aParentOf(cp);
                }
            }
        }
    }

The call below will return true if A is a parent of D

is(document.getElementById('A')).aParentOf(document.getElementById('D'))

For just few calls I would use the $('#A #D').length
For very frequent calls I would use the DOM one.

Using the 'is' method actually returns a boolean.

if($('#mymainid').is(':has(#mysubid)')) // true

Going the other direction...

if($('#mysubid').parents('#mymainid').length) // 1