for jq 嵌套_遍历嵌套列表 – jQuery

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

}

• Aunt Grace
• Mother Joan
• Father Joe
  • Son John
  • Son James
  • Daughter Aine
• Uncle Tom
• Aunt Jen

Move down

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

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

}

});

}

}

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

使用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); }

}