檢測jQuery中的最後一個列表項/ javascript

Question

我在網站上有一組標籤（主標籤），每個標籤都有另一組標籤（子標籤）。 我想使用鍵盤上的箭頭鍵來導航選項卡，而不是鼠標。

這些標籤僅僅是HTML列表項<li>

當我到達最後一個子選項卡，使用箭頭鍵，我希望它去到下一個主選項卡，以便它可以顯示自己的子選項卡，並在其內部進行導航。

我的問題是，如何使用箭頭鍵（即右箭頭鍵）在jQuery/javascript中檢測到最後一個列表項（選項卡）？

非常感謝

Answer 1

你也許可以在jQuery的使用無論是:last或:last-child選擇。根據您的<li>標籤如何嵌套，您可能還必須使用children()函數。

例如，假設你有以下標記：

<ul id="nav"> 
     <li>List item</li> 
     <li>List item with sub items 
      <ul> 
       <li>Sub list item</li> 
      </ul> 
     </li> 
    </ul> 

這將選擇最後一個頂級<li>

$('ul#nav > li:last').css('border', '1px solid red'); 

---

這將選擇最後<li>遍歷DOM dow nward。在這種情況下，它的<li>文字 「子列表項」

$('ul#nav li:last').css('border', '1px solid red'); 

---

這將選擇任何<li>標籤是他們的父母的最後一個子

$('ul#nav li:last-child').css('border', '1px solid red'); 

Answer 2

var maintabs = $('.maintab'), 
    active_maintab_eq = 0, 
    active_subtab_number = 1; 

$(document).keyup(function(e){ 

if (e.which == 39) { 
// right arrow key pressed 
    if (active_subtab_number == maintabs.eq(active_maintab_eq).find('li').length) { 
     // go to next main-tab 
     // and reset active sub-tab counter 
     ++active_maintab_eq; 
     active_subtab_number = 1; 
    } else { 
     ++active_subtab_number; 
    } 
} 

}); 

有些事情是這樣的，我想。

Answer 3

您可以使用.length找出是否jQuery選擇發現任何東西：

var nextSubTab = $(currentSubTab).next("li"); 
if (nextSubTab.length == 0) { 
    // oops, end of this tab, switch to next tab 
}