Metodo next() di jQuery per l'interazione
Esempio
Trova l'elemento gemello successivo di ogni paragrafo, selezionando solo i paragrafi con la classe "selected":
$("p");.next(".selected");.css("background", "yellow");
Definizione e uso
next() ottiene l'elemento gemello successivo di ogni elemento nella raccolta di elementi abbinati. Se viene fornito un selettore, restituisce il gemello successivo che corrisponde al selettore.
Sintassi
.next(selector)
| Parametro | Descrizione |
|---|---|
| selector | Valore di stringa, che contiene l'espressione di selettore utilizzata per abbinare gli elementi. |
Spiegazione dettagliata
Se viene fornito un oggetto jQuery che rappresenta un insieme di elementi DOM, il metodo .next() ci permette di cercare l'elemento gemello successivo dell'elemento nel albero DOM, e costruire un nuovo oggetto jQuery con l'elemento che corrisponde.
Questo metodo accetta un'espressione di selettore opzionale, dello stesso tipo di quella che passo alla funzione $(). Se l'elemento gemello successivo corrisponde al selettore, rimarrà nel nuovo oggetto jQuery; altrimenti verrà escluso.
Pensa a questa pagina con una semplice lista:
<ul> <li>elemento della lista 1</li> <li>elemento della lista 2</li> <li class="third-item">elemento della lista 3</li> <li>elemento della lista 4</li> <li>elemento della lista 5</li> </ul>
Se iniziamo dal progetto tre, possiamo trovare l'elemento che lo segue:
$('li.third-item');.next();.css('background-color', 'red');
Il risultato di questa chiamata è che il progetto 4 è stato impostato con sfondo rosso. Poiché non abbiamo applicato un'espressione di selettore, l'elemento successivo è chiaramente incluso come parte dell'oggetto. Se avessimo già applicato un selettore, verificheremmo se corrisponde prima di includerlo.
