javascript - 如何迭代嵌套 HTML 列表而不返回 "youngest"子级？

Question

fiddle :https://jsfiddle.net/zayjeLrk/12/

我想迭代 3 层 深度的 HTML 嵌套列表。

<ul>
    <li>animals
        <ul>
            <li>birds
                <ul>
                    <li>crow</li>
                    <li>parrot</li>
                </ul>
            </li>
            <li>reptiles</li>
        </ul>
    </li>
    <li>plants</li>
    <li>bugs</li>
</ul>

我希望它迭代列表，以便它按此顺序返回元素(注意，这不是将在 fiddle 中显示的确切文本； fiddle 还将包含子元素):

动物、鸟类、爬行动物、植物、昆虫

意思是，它会跳过“最年轻”或“最深”的 child 。截至目前，我正在迭代 jQuery 对象。

var stepList = $("ul  li ul li > ul li");

这显然会让 children 乌鸦、鹦鹉，这是我不想要的。我需要返回类似于下面减去这两个元素的东西:

var stepList = $("ul li");

问题:是否有一个 jQuery 对象可以分配给 stepList，它可以为我提供除 child 之外的所有内容？

编辑:如果没有，我怎样才能实现我的目标？

Answer 1

您可以通过计算 parent 来检查嵌套级别

$("ul li").each(function() {
    if ( $(this).parents('ul').length < 3 ) {

        // do stuff

    }
});

FIDDLE

为了使其更加动态，人们可以简单地找到最深的嵌套级别并基于此进行过滤

var lis   = $("ul li");

var nest  = $.map(lis, function(item) {
    return $(item).parents('ul').length;
});

var max   = Math.max.apply(null, nest);

var stepList = lis.filter(function(index, item) {
    return $(item).parents('ul').length !== max;
});

FIDDLE