jquery - 使用 jQuery 获取 DOM 中选定节点的最大深度

Question

我想计算 DOM 树结构的最大“深度”(给定根的树的最长分支的长度)。例如:

<div class="group level0" id="group1">
    <div class="group level1" id="group2">
        <div class="group level2" id="group3">
            <div class="group level3">
            </div>
        </div>
    </div>
    <div class="group level1">
        <div class="group level2">
        </div>
    </div>
</div>

例如，div#group1 的结果为 3。div#group2 的结果为 2，div#group3 的结果为为 1。

Answer 1

这里:

var calcDepth = function ( root ) {
    var $children = $( root ).children();
    var depth = 0;

    while ( $children.length > 0 ) {
        $children = $children.children();
        depth += 1;
    }

    return depth;
};

现场演示: http://jsfiddle.net/WqXy9/

calcDepth( $('#group1')[0] ) // => 3
calcDepth( $('#group2')[0] ) // => 2