代码之家 › 专栏 › 技术社区 › BMBM

查找嵌套深度

jquery php

BMBM · 技术社区 · 14 年前

<ul>
    <li>
        <a href="#">Test</a>

        <ul>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Test</a>

        <ul>
            <li><a href="#">Test</a></li>
            <li>
                <a href="#">Test</a>

                <ul>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

javascript/jquery解决方案或使用DOM扩展的基于PHP的解决方案都可以。我真的想不出什么好办法。也许有一个xpath表达式正好满足了我的要求?

ul 元素,在本例中为3。

4 回复 | 直到 14 年前

Andy Casey 14 年前

如果您不想指定最低的选择器,这将为您提供最大的嵌套级别数:

var n = 0

$('ul').each(function(i){ 
    if (($(this).parents('ul').length + 1) > n) { n = $(this).parents('ul').length + 1; }
});

user113716 14 年前

即使你已经接受了一个答案,我还是要把这个扔出去,因为我觉得这样会更有效率。

试一试: http://jsfiddle.net/3haSq/

Math.max.apply(null, $('ul:not(:has(ul))').map(function() {
    return $(this).parents('ul').length;
}).get()) + 1;

$('ul:not(:has(ul))') 只关心 <ul> 有影响的因素不有嵌套的 <
.map().get() 给你一个数组的数量他们的父母 <ul> 元素
Math.max() 找到最大值
+1 最后代表 <ul>

编辑:

我们这样做的原因 Math.max.apply() 数学.max() 很简单。

正常情况下需要几个 int 像这样的论点:

Math.max(12, 23, 34);  // results in `34`

通常 .apply() 方法用于调用函数但更改值 this 对于那个函数调用。这个第一的参数是的新值 这 . 我们经过这里 null

重要的一部分 .apply() Array 通常传递给函数的参数。以上面的例子为例,我们会这样做:

Math.max.apply(null, [12,23,34]);  // Converts the Array to a list of arguments

数学.max() 接受一个数组 内景 而不是几个逗号分隔的 内景

(有一个类似的方法叫做 .call()

Math.max.call(null, 12,23,34);   // This version takes several arguments
                                 //     instead of one Array.

jAndy 14 年前

“好”的方法是计算特定元素的父元素。比如说,有一个带有id的锚== foobar ,你可以做到

$('#foobar').parents.length - 1

这将返回父节点的数量,也就是深度。

child nodes .

Mutation Person 14 年前

如果您想指定根,这个递归函数就可以工作了。我在下面的例子中使用了“body”:

function Recurse($item, depth) {
    $item.each(function() {
        depth.count++;
        if (depth.count > depth.max) {
            depth.max = depth.count;
        }
        Recurse($(this).children(), depth);
    });
    depth.count--;
    return depth.max;
}


$(document).ready(function() {
    alert(Recurse($("body"), { count: 0, max:0 }));
}

http://jsfiddle.net/RqHzf/