détection du dernier élément de la liste dans jquery/javascript

Question

J'ai un ensemble d'onglets (onglets principaux) sur un site Web et chaque onglet a un autre jeu d'onglets (sous-onglets). Je souhaite utiliser les touches fléchées d'un clavier pour naviguer dans les onglets au lieu d'une souris.

Ces onglets ne sont que des éléments de liste HTML <li>

Quand j'atteins le dernier sous-onglet avec la touche flèche, je le veux pour revenir à l'onglet suivant principal afin qu'il puisse afficher ses propres sous-onglets, et continuez la navigation à l'intérieur. Ma question est, comment puis-je détecter, en jQuery/javascript, quand j'ai atteint le dernier élément de la liste (onglet) en utilisant les touches fléchées, c'est-à-dire la touche fléchée droite?

Merci beaucoup

Answer 1

Vous pourriez être en mesure d'utiliser soit les :last ou :last-child sélecteurs jQuery. En fonction de l'imbrication de vos balises <li>, il se peut que vous deviez également utiliser la fonction children().

Par exemple, disons que vous avez le balisage suivant:

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

Ce sélectionnerait le dernier haut niveau <li>

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

---

Cela choisirait la dernier <li> traversant le DOM dow nward. Dans ce cas, il est le <li> avec le texte "liste Sous rubrique"

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

---

Ce sélectionnerait les <li> balises qui sont le dernier enfant de leur parent

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

}); 

Une chose comme ça, je suppose.

Answer 3

Vous pouvez utiliser .length pour savoir si un sélecteur jQuery trouvé quoi que ce soit:

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