循环浏览一个元素组合在一起的jQuery对象

Cycling through a jQuery object with elements grouped together

本文关键字：在一起 组合 jQuery 对象 元素 一个 浏览 循环      更新时间：2023-09-26

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

<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>

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

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

我正在研究同样的问题，但在我的项目中，我使用KnockoutJS。实际上，最初的逻辑是用纯jQuery编写的，我用Knockout对其进行了重构。下面是使用jQuery的解决方案:

小提琴——http://jsfiddle.net/6QN77/2/

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

<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;
        }
    });
});

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

在我的探索中，为那些寻找它的人提供原生JS的答案，这里是@Mario j Vargas在原生Javascript中改编的好答案。它只需要额外的2行代码。

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);
}());

获取类"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);
 }

你可以用

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

遍历项。

相关文章：