Erkennung des letzten Listenelements in jquery/javascript

Question

Ich habe eine Reihe von Registerkarte (Hauptregisterkarten) auf einer Website und jede Registerkarte verfügt über eine andere Gruppe von Registerkarten (Unterregisterkarten). Ich möchte die Pfeiltasten auf einer Tastatur verwenden, um die Registerkarten anstelle einer Maus zu navigieren.

Diese Registerkarten sind nur HTML-Listenelement <li>

Als ich das letzte Unterregister mit der Pfeiltaste erreichen, ich es zurück auf das nächste Hauptregister gehen will, damit es seine eigenen Unterregister angezeigt werden kann, und führe die Navigation darin fort.

Meine Frage ist, wie kann ich erkennen, in jQuery/Javascript, wenn ich das letzte Listenelement (Registerkarte) mit den Pfeiltasten, d. H. Die rechte Pfeiltaste erreicht habe?

Vielen Dank

Answer 1

Möglicherweise können Sie verwenden entweder die :last oder :last-child Selektoren in jQuery. Abhängig davon, wie Ihre <li> Tags verschachtelt sind, müssen Sie möglicherweise auch die children() Funktion verwenden.

Zum Beispiel: Angenommen, Sie das folgende Markup haben:

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

Dies würde wählen Sie die letzte Top-Level-<li>

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

---

Dies würde wählen die zuletzt <li> über das DOM dow nachmittags. In diesem Fall ist es die <li> mit dem Text "Sub Listenpunkt"

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

---

Diese alle <li> Tags auswählen würde, die das letzte Kind ihrer Eltern sind

$('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; 
    } 
} 

}); 

So etwas denke ich.

Answer 3

Sie können .length verwenden, um herauszufinden, ob ein jQuery-Selektor etwas gefunden:

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