遍历嵌套列表 – jQuery

2019年8月5日 243次阅读

我正在使用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>

最佳答案 我不是百分之百地讨论你想要遍历如何工作,但我会用这个假设来刺激它：

您希望它工作的方式是遍历所有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);
            }
        });
    }
}

随之而来的Fiddle将演示它：http://jsfiddle.net/xhh4wqv7/1/

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

使用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/

点赞