获取元素的DOM层次结构级别(计数后代级别)

时间:2013-08-31 18:21:36

标签: javascript jquery html

是否有一种有效的方法来计算特定元素的最深后代级别?

示例:

<div id="wrapper">
  <ul>
    <li class="first">first</li>
    <li class="active">second</li>
    <li class="last"><a>third</a></li>
  </ul>
</div>

#wrapper应该返回4的后代级别,因为最深的链是这样的:#wrapper > ul > li > a

li.first应该返回1,因为它没有子节点,li.last应该返回2,因为li.last > a

我可以执行$('#wrapper').find(*)并迭代所有结果,对于具有大量后代的元素,这应该非常慢,特别是对于body元素。

以下是试验的开始:http://jsbin.com/ixeWaja/1/edit

如何有效解决这个问题?

1 个答案:

答案 0 :(得分:6)

如果您最终需要深度,效率可能不是您最关心的问题,但这是一种非常简洁有效的方法。

var el = $("#wrapper");
var i = 0;

while ((el = el.children()).length) {
    i++;
}

http://jsbin.com/ixeWaja/4/