通過元素組合在一起的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)

遍歷項目。