Question

我想遍历一个 3-layer 深层的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>

我希望它遍历列表，以便按此顺序返回元素（注意，这不是将在小提琴中显示的精确文本;小提琴也将包含子元素）：

动物，鸟类，爬行动物，植物，虫子

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

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

这显然让孩子乌鸦，鹦鹉这是我不想要的。我需要一些返回类似减去这两个元素的东西：

var stepList = $("ul li");

问题：是否有一个我可以分配给stepList的jQuery对象，它会给我一切 EXCEPT 这些孩子？

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

Answer 1

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

$("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

Answer 2

解决这个问题的最好方法是让所有孩子（就像你现在一样），然后通过它们进行迭代，并切除没有相同元素的孩子的孩子。

所以让所有的孩子都像你一样。

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

然后：

var el = "li";
var listWithoutYoungestChildren = [];
for(var i = 0; i < stepList.length; i++) {
     if($(stepList[i]).children(el).length > 0) 
         listWithoutYoungestChildren.push(stepList[i]);
}

如何在不返回“最年轻”的孩子的情况下迭代嵌套的HTML列表？

2 个答案: