遍历嵌套列表 - jQuery

Question

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

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

    .parentStyle {

      background-color: #F99;

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul id="treeList">
    <li class="parent">Aunt Grace</li>
    <li class="parent">Mother Joan</li>
    <li class="parent">Father Joe
      <ul id="innerList">
        <li class="child">Son John</li>
        <li class="child">Son James</li>
        <li class="child">Daughter Aine</li>
      </ul>
    </li>
    <li class="parent">Uncle Tom</li>
    <li class="parent">Aunt Jen</li>
  </ul>
</div>

<button id="MoveDown">Move down</button>

Answer 1

我不是 100% 知道你希望遍历如何工作，但我会在这个假设下尝试一下：

您希望它的工作方式是遍历作为给定 UL (lvl 0) 的直接子级的所有 LI。如果一个 LI 包含一个 UL (lvl1)，您希望先进入该子列表 (lvl 1)，然后再继续返回父级相邻 LI (lvl 0)。

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

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

随附的 Fiddle 将对其进行演示：http://jsfiddle.net/xhh4wqv7/1/

更新：因为我没有阅读您的原始代码示例，或者没有给予适当的关注，所以我没有准确回答您要查找的内容。因为我看到你要一个接一个地去下一个并添加一个类，所以我更新了一个新的 Fiddle。

使用 index() 方法，您可以跟踪您在树中的位置。我认为这可能是最简单的遍历方式。如果你想在父节点上保持样式，或者想添加一个不同的类，唯一的复杂之处就来了，但这至少可以通过 .closest('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); }
}

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