Question

我目前正在使用jQuery进行一些DOM遍历，我试图在#treeList中单击按钮时一次选择一个元素，但是一旦它通过第二个列表{ {1}}，它将选择该列表中的所有元素，并在单击时继续向下列表。如何像#innerList一样继续#innerList？

＆＃13;

#treeList

＆＃13;

$("#MoveDown").click(function() {
  $('.parentStyle + li, li:eq(0)')
    .last()
    .addClass('parentStyle').siblings('li')
    .removeClass('parentStyle');
});

＆＃13;

    .parentStyle {

      background-color: #F99;

    }

＆＃13;

Answer 1

我不是100％关于你希望遍历如何工作，但我会用这个假设来刺激它：

您希望它的工作方式是通过所有LI，这些LI是给定UL（lvl 0）的直接子项。如果LI包含UL（lvl1），则您希望在继续返回父邻近LI（lvl 0）之前进入该子列表（lvl 1）。

如果这个假设是准确的，那么这段代码就可以实现：

$('.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);
            }
        });
    }
}

伴随着小提琴演示它：http://jsfiddle.net/xhh4wqv7/1/

更新：因为我没有阅读您的原始代码示例，或者没有给予适当的关注，所以我没有回答您正在寻找的内容。因为我看到你逐一前往下一个并添加一个类，我更新了一个新的小提琴。

使用index（）方法，您可以跟踪您在树中的位置。我认为这可能是最简单的遍历方式。唯一的复杂因素是，如果您想在父节点上保留样式，或者想要添加不同的类，但这可以通过.closest（＆＃39; li＆＃39;）至少完成。

代码：

$("#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); }
}

小提琴：http://jsfiddle.net/xhh4wqv7/4/

遍历嵌套列表 - jQuery

1 个答案: