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>

我想使用向上/向下箭头键（我已经使用.item设置并使用关键代码on('keydown')和{{1）来遍历所有38元素在当前所选项目之前或之后的下一个项目上设置40，根据需要环绕到顶部/底部。

使用.selected和$().next()将不起作用，因为它只适用于兄弟姐妹，而不适用于$().prev()等jQuery对象。\ < / p>

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

Answer 2

在我寻求为那些寻找它的人提供原生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);
}());

Answer 3

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

var items = $('.item'); 

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

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

OR

你可以这样做

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

Answer 4

您可以使用类似

的内容

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

迭代项目。

循环遍历jQuery对象，其中元素组合在一起

4 个答案: