如何正确遍历a<；的列表项；ul>；使用jQuery？

我有以下

：

<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 = $('.selected'); //currently selected <li>
if ($(li).next('.test').length) {
     $(li).removeClass('selected');
     $(li).next('.test').addClass('selected');
} 

li=$（'.selected'）//当前选择的

if（$（li）.next（'.test'）.length）{
$（li）.removeClass（'selected'）；
$（li）.next（'.test'）.addClass（'selected'）；
} 

在我到达一个分隔符（换句话说，一个没有.test类的

）之前，它工作得很好。在到达第一个分隔符时，我需要知道如何查看下一个“.test”

如果有帮助，则动态生成

li

。另外，我在

keydown（）

上触发此事件

---

有什么想法吗？建议

将您的

.next（'.test'）

更改为

.nextAll（'.test'）.first（）

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

您可以像这样使用：

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

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

在您的情况下，这个应该可以（但不会）

这里有一些特别的东西

.next（）

不是jquery选择中的下一个元素，而是dom中的下一个同级元素，不管元素列表是什么！（我认为这是一个jquery文档错误）。因此，这将只在“li”拥有测试类时起作用

要解决该问题，您可以使用以下方法：

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

和。

。下一步（'.test'）

仅在与选择器匹配时返回下一项，不会跳过不匹配的项。等式（0）与.first（）相同，并且：first yes？

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