JS/jQuery: получить глубину элемента?

Какой самый простой способ получить глубину элемента в чистом JavaScript или jQuery? Под "глубиной" я подразумеваю, сколько элементов глубоко вложен или сколько предков оно имеет.

Ответы

Ответ 1

Как насчет:

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

Ответ 2

Дополнительная заметка. Если вы хотите получить глубину относительно определенного контекста, вы можете сделать:

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

Выше, я ищу, сколько UL находится внутри контейнера #ContextContainerID

Ответ 3

Предположим, вы не хотите включать тег body и html в родителях для подсчета использования:

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

Демо-версия онлайн: http://jsfiddle.net/zaJff/

Ответ 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>

Ответ 5

Моим советом было бы переосмыслить то, как вы решаете свою проблему - я думаю, что найти количество поколений между узлами, вероятно, не самый лучший способ пойти, это похоже на решение, которое, вероятно, будет легко ломаться в будущем изменения в коде.

Если вы настаиваете, однако, решение (на Cletus, в собственном javascript) выглядит довольно хорошо на этой странице: найти количество узлов между двумя элементами с помощью jquery?