rilevare l'ultimo elemento della lista in jQuery / javascript

Question

ho una serie di tab (principale-schede) su un sito web e ogni scheda ha un altro insieme di schede (sotto-schede). Voglio Usa i tasti freccia su una tastiera per navigare le schede, al posto del mouse.

Queste schede sono solo voci di elenco HTML <li>

Quando raggiungo l'ultima scheda secondaria con il tasto freccia, lo voglio per tornare alla scheda principale accanto in modo che possa visualizzare le proprie schede secondarie, e portare avanti la navigazione al suo interno.

La mia domanda è: come posso rilevare, in jQuery / javascript, quando ho raggiunto l'ultima voce di lista (scheda) con i tasti freccia vale a dire il tasto freccia destra?

Molte grazie

Answer 1

Si potrebbe essere in grado di utilizzare il : ultima o : last-child selettori in jQuery. A seconda di come i tag <li> sono annidati, si potrebbe anche essere necessario utilizzare le bambini () funzione lungo con esso.

Per esempio, diciamo che avete il seguente markup:

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

Ciò selezionare l'<li> all'ultimo livello superiore

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

---

Questo sarebbe selezionare l'ultima <li> attraversamento del DOM verso il basso. In questo caso è il <li> con il testo "elemento della lista Sub"

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

---

Ciò selezionare qualsiasi tag <li> che sono l'ultimo figlio del genitore

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

});

Qualche cosa come questa, credo.

Answer 3

È possibile utilizzare .length per scoprire se un selettore jQuery trovato nulla:

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