Question

I’m having a little trouble figuring out a fast way to accomplish a (seemingly) simple task. Say I have the following html:

<ul>
  <li>One</li>
  <li>Two</li>
  <li id='parent'>
    <ul>
      <li>Three</li>
      <li>
        <ul>
          <li>Four</li>
          <li id='child'>Five</li>
        </ul>
      </li>
      <li>Six</li>
    </ul>
  </li>
</ul>

And have the following two elements:

var child = $("#child");
var parent = $("#parent");

In this example, it’s clear that:

child.parent().parent().parent().parent();

will be the same node as ‘parent’. But the list I’m traversing is variable size, so I need to find a way to find out how many ‘.parent()’s I’ll need to go through to get to that parent node. I always know where child and parent are, I just don’t know how many ‘layers’ there are in between.

Is there any built in jQuery method to do something like this, or is my best bet a recursive function that gets the parent, checks if the parent is my desired node, and if not calls itself on its parent?

Edit: I may not have explained myself clearly enough. My problem isn’t getting TO the parent, my problem is finding out how many nodes are between the child and parent. In my example above, there are 3 nodes in between child and parent. That’s the data I need to find.

Answer 1

If you just want to get to the parent, do this:

child.parents("#parent");

That’s easier than doing:

child.parent().parent().parent();

Or is there some other reason you need to know the number?

A simple loop could do it:

var node = child[0];
var depth = 0;
while (node.id != 'parent') {
  node = node.parentNode;
  depth++;
}