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

Answer 2

此函数将通过给定root的DOM树找到最大深度，仅通过具有特定class的节点跟踪树：

function getDepth(root, className) {
    var children = root.children('.' + className),
        maxDepth = 0;

    if (children.length === 0) {
        return maxDepth;
    } else {
        children.each(function() {
            var depth = 1 + getDepth($(this), className);
            if (depth > maxDepth) {
                maxDepth = depth;
            }
        });
    }

    return maxDepth;
}

var root = $('#group1');
var className = 'group';

var depth = getDepth(root,className);

这是一个带有稍微复杂的DOM的演示：

--- jsFiddle DEMO ---

Answer 3

这是非递归解决方案：

function len(sel) {
    var depth = 0;
    $(sel + " :not(:has(*))").each(function() {
        var tmp = $(this).parentsUntil(sel).length + 1;
        if (tmp > depth) depth = tmp;
    });
    return depth;
}

DEMO： http://jsfiddle.net/f2REj/

Answer 4

jQuery.fn.depth = function() {
    var children = jQuery(this).children();
    if (children.length === 0)
        return 0;
    else
    {
        var maxLength = 0;
        children.each(function()
        {
            maxLength = Math.max(jQuery(this).depth(), maxLength);
        });
        return 1 + maxLength;
    }
};

演示：http://jsfiddle.net/7Q3a9/

使用jQuery获取DOM中所选节点的最大深度

4 个答案: