blocks|key|819914|text|这样如何：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|819915|$('#my-element').parents().length|code-block|syntax|javascript|819916|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>How about:</p>

<pre><code>$('#my-element').parents().length
</code></pre>


blocks|key|1035116|text|另外还有一个注解。如果你想获得与某个上下文相关的深度，你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1035117|var+depth+=+$("#my-element","#ContextContainerID").parents("ul").length;|code-block|syntax|javascript|1035118|上面，我正在搜索容器#ContextContainerID中有多少个UL|1035119|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>An additional note. If you want to get the depth relative to a certain context you can do:</p>

<pre><code>var depth = $("#my-element","#ContextContainerID").parents("ul").length;
</code></pre>

<p>Above, I'm searching for how many UL's are within the container #ContextContainerID</p>


blocks|key|819935|text|假设您不想在父对象中包含body和html标记来计算use：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|819936|$("#element").parents("*").not("body,html").size()|code-block|syntax|javascript|819937|在线演示：http://jsfiddle.net/zaJff/|offset|length|819938|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/zaJff/^0|0|0|5|Q|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Supposing you don't want to include body and html tag in the parents to count use:</p>

<pre><code>$("#element").parents("*").not("body,html").size()
</code></pre>

<p>Online demo here: <a href="http://jsfiddle.net/zaJff/" rel="nofollow">http://jsfiddle.net/zaJff/</a></p>


blocks|key|819921|text|尝试如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|819922|<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>|code-block|syntax|javascript|819923|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try something like this:</p>

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

    &lt;body&gt;
        &lt;ul&gt;
            &lt;li&gt;moo&lt;/li&gt;
            &lt;li&gt;foo&lt;/li&gt;
            &lt;li&gt;fasoo&lt;/li&gt;
            &lt;li&gt;moasf&lt;/li&gt;
            &lt;li&gt;moosadg&lt;/li&gt;
            &lt;li&gt;moo1&lt;/li&gt;
            &lt;li&gt;moo412&lt;/li&gt;
            &lt;li&gt;moo613a&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|820056|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|820057|function+elementDepth(el){
	var+depth+=+0
	while(null!==el.parentElement){
		el+=+el.parentElement
		depth%2B%2B
	}
	return+depth
}
console.log(elementDepth(document.getElementById('test')))|code-block|syntax|javascript|820058|<div>
++<span+id="test">Hi</span>
</div>|820059|820060|在本例中它表示为3，因为它计算了外部<div>、<body>和<html>标记。|offset|length|style|CODE|820061|entityMap^0|0|0|0|0|I|5|O|6|V|6|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|V|8|@$L|W|M|X|N|O]|$L|Y|M|Z|N|O]|$L|10|M|11|N|O]]|9|@]|A|$]]|$1|P|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|Q|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function elementDepth(el){
	var depth = 0
	while(null!==el.parentElement){
		el = el.parentElement
		depth++
	}
	return depth
}
console.log(elementDepth(document.getElementById('test')))</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  &lt;span id="test"&gt;Hi&lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>It says 3 in this example because it counts the outer <code>&lt;div&gt;</code>, the <code>&lt;body&gt;</code> and the <code>&lt;html&gt;</code> tag.</p>


blocks|key|1035077|text|我的建议是重新考虑解决问题的方式-我认为找到节点之间的世代数可能不是最好的方法，它听起来像是一个很容易被未来代码更改破坏的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1035078|但是，如果您坚持，这个页面上的解决方案(由Cletus用原生javascript编写)似乎相当不错：find+number+of+nodes+between+two+elements+with+jquery?|offset|length|1035079|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/1387560/find-number-of-nodes-between-two-elements-with-jquery^0|0|1E|1I|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

<p>My advice would be to rethink the way you are solving your problem - I think finding the number of generations between nodes probably isn't the best way to go, it sounds like a solution that will be likely to break easily by future changes to the code.</p>

<p>If you insist however, the solution (by Cletus, in native javascript) seems pretty good on this page:
<a href="https://stackoverflow.com/questions/1387560/find-number-of-nodes-between-two-elements-with-jquery">find number of nodes between two elements with jquery?</a></p>


<p>What's the easiest way to get the depth of an element in pure JavaScript or jQuery? By "depth" I mean how many elements deep is it nested, or how many ancestors does it have.</p>


JS/jQuery: Get depth of element?

容器

jQuery

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

问JS/jQuery:获取元素的深度？
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JS/jQuery:获取元素的深度？EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JS/jQuery:获取元素的深度？
EN