遍历嵌套列表-jQuery

我目前正在使用jQuery进行一些DOM遍历，我试图在单击按钮时在

#treeList

中一次选择一个元素，但一旦它通过第二个列表

#innerList

，它将选择该列表中的所有元素，并在单击后继续向下移动列表。如何像处理树列表一样继续处理

#innerList

$（“#向下移动”）。单击（函数（）{
$（'.parentStyle+li，li:eq（0）'）
.last（）
.addClass（'parentStyle'）。同胞（'li'））
.removeClass（“父样式”）；
});
.parentStyle{
背景色：#F99；
}


格蕾丝阿姨
琼妈妈
乔神父

儿子约翰
儿子詹姆斯
女儿


汤姆叔叔
任阿姨

向下移动
我不是100%地了解您希望遍历如何工作，但我将尝试一下以下假设：

您希望它工作的方式是遍历作为给定UL（0级）直系子代的所有LIs。如果一个LI包含一个UL（lvl1），您希望在继续通过父相邻的LIs（LVL0）返回之前，先进入该子列表（lvl1）

如果该假设是准确的，则该代码将实现：

$('.clickit').click(function() {
    var level = 0;
    var $list = $('#treeList');
    traverseList($list, level);
});

function traverseList($list, level) {
    if ($list.length > 0) { 
        $list.children('li').each(function() {
            $(this).prepend(level);
            if ($(this).children('ul')) {
                traverseList($(this).children('ul'), level + 1);
            }
        });
    }
}

一把随行的小提琴将演示它：

更新：因为我没有阅读您的原始代码示例，或者没有给予适当的注意，所以我没有准确地回答您的问题。因为我看到你将一个接一个地转到下一个并添加一个类，所以我更新了一个新的提琴

使用index（）方法，可以跟踪您在树中的位置。我认为这可能是最简单的穿越方式。如果您想在父节点上保持样式，或者想添加不同的类，但至少可以使用.nestest（'li'）来完成，那么唯一的麻烦就来了

代码：

$("#MoveDown").click(function () {
    var $tree = $('#treeList');
    var $li = getLi($tree);
    $tree.find('li').removeClass('parentStyle');
    $li.addClass('parentStyle');    
});

function getLi($tree) {
    var $li = $tree.find('.parentStyle').last();
    var $liList = $tree.find('li');
    var idx = $liList.index($li);
    if (idx < 0 || idx == $liList.length) { return $liList.first(); }
    else { return $liList.eq(idx + 1); }
}

$（“#向下移动”）。单击（函数（）{
var$tree=$（“#树列表”）；
var$li=getLi（$tree）；
$tree.find（'li'）.removeClass（'parentStyle'）；
$li.addClass（'parentStyle'）；
});
函数getLi（$tree）{
var$li=$tree.find（'.parentStyle'）.last（）；
var$liList=$tree.find（'li'）；
变量idx=$liList.index（$li）；
如果（idx<0 | | idx==$liList.length）{返回$liList.first（）；}
else{return$liList.eq（idx+1）；}
}

小提琴：
如果当前选中时只想选择
Joe神父
，则需要添加
span
或
div
包装，以便添加颜色。要选择儿童<代码> LI>代码>，您需要重新修改整个代码：我甚至没有考虑使用索引…使用颜色的唯一真正原因是显示选择是在单击按钮时进行的。谢谢，我非常感激！您是否要浏览上面的列表，如果找到包含UL的LI，请在继续下一个LI之前遍历该LI？或者您想遍历级别1，然后进入级别2？刚刚注意到您的代码示例。哈哈，我要为你更新我的答案。显然我是瞎的。这实际上是一个很好的解释，但是根据@Karl AndréGagnon的jsfiddle，我摆弄了一些div之类的东西，让它按照我需要的方式工作，这样每个元素都可以在点击时被选中！无论如何，谢谢在我回到我的机器并更新它之前评论；）很高兴你找到了工作。我也根据你的需要发布了一个替代方案，jic.Haha。我刚注意到你提到的小提琴。我想这和我做的完全一样。呸，显然我今天不太注意。