Question

我有一个HTML列表，如下所示：

<ul class="search_list">
  <li class="header">Header1</li>
  <li class="item">Text1<li>
  <li class="item current">Text2<li>
  <li class="header">Header2</li>`
  <li class="item">Text3<li>
</ul>

我创建了一个jQuery脚本，它使用箭头键滚动元素列表。这可以在text1和text2项之间正常工作，但即使选择了text2（标记为当前类），我也希望如此，我按下{{1}的向下箭头键已被选中，但这不起作用。但我不明白，因为我使用以下jQuery脚本，我明确要求类项...我该如何解决这个问题？我假设text3是问题...

http://jsfiddle.net/sfDJs/7/

我只是想通了，它就是这样的。但这是好编码吗？：）

class="header"

Answer 1

next在兄弟之后立即获取，如果提供了选择器，则仅在匹配时才检索下一个兄弟。在您的情况下，如果下一个元素正好是.header，那么下一个兄弟的一部分是$(".search_list_item .current").next('.item')，.item会给您.item。 nextAll，prevAll执行相同的不同之处 - 获取所有下一个/ prev兄弟姐妹与选择器匹配。
应该是：

$(document).keydown( function(e){ 
    if (e.which == 40) {
        $('.search_list li.item:not(:last)').filter(".current").removeClass("current").nextAll(".item:first").addClass("current"); 
    } else if (e.which == 38) {
        $('.search_list li.item:not(:first)').filter(".current").removeClass('current').prevAll('.item:first').addClass("current")
      }
});

:not(:first)，:not(:last) - 因为这是在走出菜单之前确保的演示：http://jsfiddle.net/sfDJs/9/

next（）选择不正确的元素

1 个答案: