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#group13になります。の結果はdiv#group22になり、の結果はdiv#group31になります。

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

この関数は、指定された から DOM ツリーを介して最大の深さを見つけ、root特定の を持つノードのみを介してツリーをトレースします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 デモ ---

Answer 3

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/

Answer 4

非再帰的なソリューションは次のとおりです。

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;
}

デモ: http://jsfiddle.net/f2REj/