jquery, how to check if a specific ID is a child of an other id?

Question

Hello,

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

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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

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

Answer 5

Using the 'is' method actually returns a boolean.

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

Going the other direction...

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

Answer 6

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);

Answer 7

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.