遍历嵌套列表 - jQuery

Question

我目前正在使用 jQuery 进行一些 DOM 遍历，我正在尝试 select 单击按钮时 #treeList 中的每个元素一次一个，但是一旦它通过第二个列表 #innerList，它将 select 该列表中的所有元素，并在单击时继续向下移动列表。你怎么能像 #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)，您希望在继续返回父级相邻 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);
            }
        });
    }
}

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

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

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

Fiddle: http://jsfiddle.net/xhh4wqv7/4/

遍历嵌套列表 - jQuery

Traversing through Nested List - jQuery

jquery

html

css

jquery-click-event

jquery-traversing