jquery newbie: come fare in modo efficiente più azioni sullo stesso elemento DOM?

Question

Recentemente ho imparato (qui su StackOverflow:)), che quando si utilizza jQuery ogni volta che scrivo

$("...") 

una ricerca DOM è effettuata per individuare gli elementi corrispondenti. La mia domanda è molto semplice: come eseguo efficientemente una serie di azioni (usando i bei metodi degli oggetti jquery) su un elemento DOM che ho localizzato con jquery? Attualmente, stavo facendo (per esempio):

var previousHtml = $("#myDiv").html(); 
$("#myDiv").addClass("tangoClass"); 
$("#myDiv").html("bla bla bla"); 
//... 

In sostanza, mi è stato sempre riferisco all'elemento scrivendo $ ("# myDiv"). Come posso manipolare ripetutamente un elemento DOM (usando le funzioni jquery, piuttosto che il Javascript vaniglia) in modo efficiente? Quanto segue evita le costose ricerche DOM?

var myDiv = $("#myDiv"); 
var previousHtml = myDiv.html(); 
myDiv.addClass("tangoClass"); 
myDiv.html("bla bla bla"); 

O devo cercare invece il concatenamento jquery chiama il più possibile, ad esempio:

var previousHtml = $("#myDiv").addClass("tangoClass").html(); //saves me 1 $("#myDiv") call 
$("#myDiv").html("bla bla bla"); 

Grazie per tutta la comprensione. :)

lara

Answer 1

Nessuno ha ancora collegato jQuery Performance Rules, quindi inserirò il messaggio, poiché si tratta di un ottimo articolo e di una lettura obbligata per i nuovi sviluppatori di jQuery!

Come vedrai conferma i tuoi sospetti: caching your jQuery objects memorizzandoli in variabili è efficace quanto concatenare.

Answer 2

Sì mi sento di raccomandare di utilizzare il concatenamento, perché i metodi di jQuery di solito restituiscono l'elemento è stato modificato, in modo che non ha bisogno di essere guardato nel DOM di nuovo. E lo trovo anche più leggibile (sai quali operazioni appartengono a quale elemento).

Answer 3

Ogni volta che si utilizza una funzione jQuery, restituisce l'oggetto jQuery completo dalla query iniziale. Ciò ti consente di concatenare le azioni, quindi la query effettiva viene eseguita solo la prima volta.

Dai tuoi esempi, non sembra che tu abbia mai usato previousHtml, quindi non hai bisogno di afferrarlo affatto. Penso che puoi fare questo:

$("#myDiv").html('bla bla bla').addClass('tangoClass'); 

Answer 4

i due sono gli stessi.

var myDiv = $("#myDiv"); // $("#myDiv") runs document.getElementById, 
         // wraps the DOMElement, returns the wrapper. 
myDiv.addClass("tangoClass"); // obviously reuses the object 
myDiv.html("bla bla bla"); // ditto 

concatenamento è esattamente lo stesso, perché i metodi di jQuery restituiscono this, l'oggetto che stanno attaccati:

myDiv 
    .addClass("tangoClass") 
    .html("bla bla bla") 
; 

è possibile verificare questo con (myDiv === myDiv.html("bla bla bla"))

per rispondere alla tua domanda ", che dovrei usare ": DRY (Do not Repeat Yourself) suggerirebbe concatenare. non dimenticare la leggibilità (non raggruppare molte chiamate di metodo in un'unica riga, la mia ricetta per la leggibilità è sopra)

Answer 5

Dipende dalle funzioni che si stanno chiamando su quell'elemento, poiché non tutte le funzioni restituiranno il DOM elemento. Tuttavia se tutte le funzioni che devi chiamare restituiranno sempre l'elemento DOM, allora potrebbe certamente rendere il tuo codice più leggibile.

Answer 6

Solo perché nessuno lo ha menzionato, utilizzando il primo metodo funzionerà anche e salvare la ricerca DOM.

Tuttavia, concatenare, come hanno detto gli altri, sarebbe il modo più "corretto" di utilizzare lo stesso elemento e applicare azioni diverse ad esso.

Buona fortuna!

Answer 7

Ho anche d'accordo che il concatenamento è il metodo migliore da usare, ma qualcosa d'altro nessuno ha l'indirizzo qui sta usando .andSelf() (1) e .end() (2) mentre concatenamento.

Quanto segue aggiunge la classe "border" sia a div sia allo p contenuto all'interno.

$("div").find("p").andSelf().addClass("border"); 

Uso .end() "riarma il selettore"

$("div") 
    .find("p").addClass("myParagraph").end() 
    .find("span").addClass("mySpan"); 

---

aggiornamento: .andSelf() è obsoleto ed essenzialmente rinominato .addBack(), utilizzare nello stesso modo.