通过元素组合在一起的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设置）循环所有.item元素，并在。之前或之后的下一项上设置.selected当前所选项目之后，根据需要环绕到顶部/底部。

使用$().next()和$().prev()无效，因为它仅适用于同级 ，而不适用于$('.searchselectors .item')类的jQuery对象。

Answer 1

我当时正在处理相同的问题，但是在我的项目中，我正在使用KnockoutJS 。 实际上，原始逻辑是使用纯jQuery编写的，而我使用Knockout对其进行了重构。 这是使用jQuery解决您的问题的解决方案：

小提琴-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标记的LI元素进行。 接下来，我获得对当前选定元素及其索引的引用。 最后，代码侦听按下的向上和向下箭头键（ keydown ），如果向上则递减，如果向上则递增。 循环是通过模运算符实现的。 所选项目的CSS类将被删除并放回原处。 出于性能原因，使用了选定的项目引用，因此不必编写$items.removeClass(".selected").eq(selectedIndex).addClass("selected");

Answer 2

为了向寻找它的人提供本机JS答案，这是@Mario j Vargas在本机Javascript中改编的好答案。 只需要两行额外的代码。

http://jsfiddle.net/kevinvanlierde/7tQSW/2/

仅将JS放在这里，HTML是相同的。

(function () {
    var $menu = document.getElementById('searchselectors'),
        items = $menu.getElementsByClassName('item'),
        $selectedItem = $menu.getElementsByClassName('selected')[0],
        selectedIndex = Array.prototype.indexOf.call($selectedItem, items)+1;

    document.body.addEventListener('keydown', function (e) {
        switch(e.keyCode) {
            case 40:  // down arrow
                $selectedItem.className = $selectedItem.className.replace(' selected','');
                selectedIndex = selectedIndex < items.length - 1 ? selectedIndex + 1 : selectedIndex;
                $selectedItem = items[selectedIndex];
                $selectedItem.className += ' selected';
                break;
            case 38:  // up arrow
                $selectedItem.className = $selectedItem.className.replace(' selected','');
                selectedIndex = selectedIndex > 0 ? selectedIndex - 1 : selectedIndex;
                $selectedItem = items[selectedIndex];
                $selectedItem.className += ' selected';
                break;
        }
    }, false);
}());

Answer 3

获取所有带有“ item”类的列表项的最简单方法是：

var items = $('.item'); 

 for (var i = 0; i < items.length; i++) {
      var item = items[i]; // iterate
 }

然后，您可以从列表中选择下一项

要么

你可以这样做

 if (!$().next) {
    var nextUL= $().parent.find('ul')
    iterateThruList(nextUL);
 }

Answer 4

您可以使用类似

var UL = $(".searchselectors").children().length; //number of UL (group names)

遍历项目。