Question

我有以下<ul>：

<ul>
     <li class='test selected'></li>
     <li class='test'></li>
     <li class='test'></li>
     <li class='test'></li>
     <li>separator</li>
     <li class='test'></li>
     <li class='test'></li>
     <li class='test'></li>
</ul>

我能够选择第一个元素并通过jquery遍历分隔符之前的<li>，如下所示：

li = $('.selected'); //currently selected <li>
if ($(li).next('.test').length) {
     $(li).removeClass('selected');
     $(li).next('.test').addClass('selected');
}

这是正常工作，直到我到达分隔符（换句话说，<li>没有'.test'类）。在到达第一个分隔符时，我需要知道如何看到我的下一个'.test'。

如果它有帮助，li是动态生成的。此外，我正在keydown()上发起此事件。

有什么想法？建议？

Answer 1

将.next('.test')更改为.nextAll('.test').first()

next（）只查看下一个兄弟，而nextAll()搜索所有未来的兄弟姐妹。

Answer 2

您可以像这样使用$.nextAll()和$.eq()：

li = $('.selected');
if ($(li).nextAll('.test').eq(0).length) {
    $(li).removeClass('selected');
    $(li).nextAll('.test').eq(0).addClass('selected');
}

Answer 3

jquery是 transveral 这意味着它选择（并应用）了完整选择。此外，它是功能，这意味着您可以链接方法（几乎所有方法）。

在您的情况下，应该（但不会）。

$('li.test.selected').removeClass('selected').next().addClass('selected');

这里有一些特别之处。 .next()不是jquery选择中的下一个，而是dom中的下一个兄弟元素，无论元素列表是什么！（我相信这是一个jquery文档错误）。因此，这只有在“li”具有测试类时才有效。

要解决这个问题，你可以使用它：

$('li.test.selected').removeClass('selected').nextAll('.test:first').addClass('selected');

和here is your standard and mandatory fiddle。

如何使用jQuery正确迭代<ul>的列表项？</ul>

3 个答案: