jQuery esplorazione - metodo end()
Esempio
Seleziona tutti i paragrafi, trova gli elementi span all'interno di questi paragrafi e li ripristina come paragrafi, impostando i paragrafi con un bordo rosso di due pixel:
$("p").find("span").end().css("border", "2px red solid");
Definizione e uso
Il metodo end() termina l'operazione di筛选 più recente nella catena corrente e ripristina il set di elementi corrispondenti allo stato precedente.
Sintassi
.end()
Spiegazione dettagliata
La maggior parte dei metodi di esplorazione di jQuery operano su un'istanza di oggetto jQuery e generano un nuovo oggetto che corrisponde a un set di elementi DOM diversi. Quando si verifica questa situazione, dovresti inserire il nuovo set di elementi in una pila mantenuta nell'oggetto. Ogni chiamata di metodo di筛选 che ha successo inserisce un nuovo elemento nella pila. Se abbiamo bisogno del vecchio set di elementi, possiamo utilizzare end() per espellere il nuovo set dalla pila.
Supponiamo che ci siano due liste molto corte nella pagina:
<ul class="first"> <li class="foo">elemento della lista 1</li> <li>elemento della lista 2</li> <li class="bar">elemento della lista 3</li> </ul> <ul class="second"> <li class="foo">elemento della lista 1</li> <li>elemento della lista 2</li> <li class="bar">elemento della lista 3</li> </ul>
Esempio 1
jQuery è particolarmente utile quando si utilizza l'attributo di catena (catena di comandi). Senza la catena di comandi, di solito chiamiamo l'oggetto precedente tramite il nome della variabile, evitando così di manipolare lo stack. Tuttavia, attraverso end(), possiamo catenare tutte le chiamate ai metodi:
$('ul.first').find('.foo').css('background-color', 'red')
.end().find('.bar').css('background-color', 'green');
Questa catena di comandi ricerca il primo elemento con la classe foo nella prima lista e imposta il loro sfondo in rosso. end() ripristina l'oggetto allo stato prima della chiamata find(), quindi il secondo find() cerca '.bar' all'interno di <ul class="first">, non '.foo' all'interno della lista, e imposta lo sfondo degli elementi corrispondenti in verde. Il risultato finale è che gli elementi 1 e 3 della prima lista hanno uno sfondo colorato, mentre gli elementi della seconda lista non subiscono cambiamenti.
Esempio 2
Questa lunga catena jQuery può essere visualizzata come un blocco di codice strutturato, l'apertura del metodo di filtraggio dei blocchi嵌套, mentre il metodo end() viene utilizzato per chiudere i blocchi:
$('ul.first').find('.foo')
.css('background-color', 'red')
.end().find('.bar')
.css('background-color', 'green')
.end();
Questo end() non è obbligatorio, perché lo elimineremo successivamente. Tuttavia, se si scrive il codice in questo modo, end() può fornire una simmetria visiva e una sensazione di ordinamento del codice, almeno per i sviluppatori, il costo è una leggera perdita di prestazioni a causa delle chiamate aggiuntive.
