javascript - 循环遍历具有组合在一起的元素的 jQuery 对象

Question

我有一组包含嵌套列表的列表项，有点像这样:

<ul class="searchselectors">
  <li class="group">Group name 1
    <ul>
      <li class="item selected">List item 1.1</li>
      <li class="item">List item 1.2</li>
      <li class="item">List item 1.3</li>
    </ul>
  </li>
  <li class="group">Group name 2
    <ul>
      <li class="item">List item 2.1</li>
      <li class="item">List item 2.2</li>
      <li class="item">List item 2.3</li>
    </ul>
  </li>
  <li class="group">Group name 3
    <ul>
      <li class="item">List item 3.1</li>
    </ul>
  </li>
</ul>

我想使用向上/向下箭头键(我已经使用 on('keydown') 和捕获键代码 38 和 40) 并在当前所选元素之前或之后的下一个元素上设置 .selected，环绕到顶部/根据需要底部。

使用 $().next() 和 $().prev() 将不起作用，因为它只适用于兄弟，而不是像 $('.searchselectors .item') 这样的 jQuery 对象。\

Answer 1

我正在处理同样的问题，但在我的元素中我使用的是 KnockoutJS .事实上，原始逻辑是用纯 jQuery 编写的，我用 Knockout 重构了它。下面是使用 jQuery 解决您的问题的方法:

Fiddle - http://jsfiddle.net/6QN77/2/

我没有花太多时间清理 JavaScript，但我现在把它留给你。

HTML

<ul id="searchselectors">
  <li class="group">Group name 1
    <ul>
      <li class="item selected">List item 1.1</li>
      <li class="item">List item 1.2</li>
      <li class="item">List item 1.3</li>
    </ul>
  </li>
  <li class="group">Group name 2
    <ul>
      <li class="item">List item 2.1</li>
      <li class="item">List item 2.2</li>
      <li class="item">List item 2.3</li>
    </ul>
  </li>
  <li class="group">Group name 3
    <ul>
      <li class="item">List item 3.1</li>
    </ul>
  </li>
</ul>

jQuery

$(function () {
    var $menu = $("#searchselectors"),
        $items = $menu.find(".item"),
        $selectedItem = $menu.find(".selected"),
        selectedIndex = $selectedItem.length - 1;

    $(document).on("keydown", function (e) {
        switch(e.keyCode) {
            case 40:  // down arrow
                $selectedItem.removeClass("selected");
                selectedIndex = (selectedIndex + 1) % $items.length;
                $selectedItem = $items.eq(selectedIndex).addClass("selected");
                break;
            case 38:  // up arrow
                $selectedItem.removeClass("selected");
                selectedIndex = (selectedIndex - 1) % $items.length;
                $selectedItem = $items.eq(selectedIndex).addClass("selected");
                break;
        }
    });
});

更新:我的解决方案围绕获取对包装元素 (#searchselectors) 的引用并获取所有标有CSS 类 .item。接下来，我获得对当前选定元素及其索引的引用。最后，代码监听按下和向上箭头键 (keydown)，如果上升则递减，如果上升则递增。循环是通过模数运算符实现的。所选元素的 CSS 类被删除并放回原处。所选元素引用用于性能原因，因此我不必编写 $items.removeClass(".selected").eq(selectedIndex).addClass("selected");