Question

在纯JavaScript或jQuery中获取元素深度的最简单方法是什么？ “深度”是指它嵌套了多少元素，或者它有多少祖先。

Answer 1

怎么样：

$('#my-element').parents().length

Answer 2

另外一张纸条。如果您想获得相对于特定上下文的深度，您可以这样做：

var depth = $("#my-element","#ContextContainerID").parents("ul").length;

上面，我正在搜索容器中有多少个UL #ContextContainerID

Answer 3

假设您不想在父母中包含body和html标记来计算使用次数：

$("#element").parents("*").not("body,html").size()

在线演示：http://jsfiddle.net/zaJff/

Answer 4

尝试这样的事情：

<html>
    <head>
        <title>MooExample</title>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("li").click(function() {
                    alert($(this).parents().length);
                });
            });
        </script>
    </head>

    <body>
        <ul>
            <li>moo</li>
            <li>foo</li>
            <li>fasoo</li>
            <li>moasf</li>
            <li>moosadg</li>
            <li>moo1</li>
            <li>moo412</li>
            <li>moo613a</li>
        </ul>
    </body>
</html>

Answer 5

我的建议是重新思考解决问题的方式 - 我认为找到节点之间的代数可能不是最好的方法，这听起来像是一个很容易被未来打破的解决方案更改代码。

如果你坚持，那么这个解决方案（通过Cletus，在本机javascript中）似乎相当不错： find number of nodes between two elements with jquery?

Answer 6

function elementDepth(el){
	var depth = 0
	while(null!==el.parentElement){
		el = el.parentElement
		depth++
	}
	return depth
}
console.log(elementDepth(document.getElementById('test')))

<div>
  <span id="test">Hi</span>
</div>

在此示例中将其表示为3，因为它计算外部<div>，<body>和<html>标签。

JS / jQuery：获取元素的深度？

6 个答案: