騎自行車通過與元素一個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> 

我經歷了所有的.item元素要循環使用上/下使用箭頭鍵（我已經使用on('keydown')設置並獲取密鑰代碼38和40），並在當前選定項目之前或之後的下一個項目上設置.selected，並根據需要環繞頂部/底部。

使用$().next()和$().prev()將無法​​正常工作，因爲它只會在兄弟姐妹工作，而不是一個jQuery對象，如$('.searchselectors .item')上。\

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

UPDATE：我的解決方案圍繞着獲得到的包裝元素的引用（#searchselectors）和獲取標記與所有LI元件CSS類.item。接下來，我得到對當前選定元素及其索引的引用。最後，代碼監聽正在按下的向下和向上箭頭鍵（​​），如果上升則遞減，如果遞增則遞增。循環是通過模數運算符實現的。所選項目的CSS類將被刪除並放回。所選的項目參考用於性能的原因，所以我不必寫$items.removeClass(".selected").eq(selectedIndex).addClass("selected");

Answer 2

最簡單的方式來獲得所有帶班「項目」列表中的項目是：

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 3

您可以使用類似

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

通過項目進行迭代。

Answer 4

在我尋求提供本機JS答案的尋求它的人，這裏是@Mario j巴爾加斯的原始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); 
}());