Detectando o último item da lista em jQuery/JavaScript

Question

Eu tenho um conjunto de guias (tabs principais) em um site e cada guia possui outro conjunto de guias (subtabs). Quero usar teclas de seta em um teclado para navegar nas guias, em vez de um mouse.

Essas guias são apenas itens de lista HTML <li>

Quando alcance a última subida com a tecla de seta, quero que ela volte para a próxima guia principal para que ela possa exibir suas próprias sub-contagens e continuar a navegação dentro dela.

Minha pergunta é: como posso detectar, no jQuery/javascript, quando cheguei ao último item da lista (guia) usando as teclas de seta, ou seja, a tecla de seta direita?

Muito obrigado

Answer 1

Você pode ser capaz de usar o :último ou : Último filho Seletores no jQuery. Dependendo de como o seu <li> Tags estão aninhadas, você também pode ter que usar o crianças() função junto com isso.

Por exemplo, digamos que você tenha a seguinte marcação:

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

Isso selecionaria o último nível superior <li>

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

---

Isso selecionaria o último <li> atravessando o DOM para baixo. Nesse caso, é o <li> com texto "Item da sub -lista"

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

---

Isso selecionaria qualquer <li> tags que são o último filho de seus pais

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

});

Alguma coisa assim, eu acho.

Answer 3

Você pode usar .length Para descobrir se um seletor de jQuery encontrou alguma coisa:

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