jquery novato: ¿cómo hacer de manera eficiente múltiples acciones en el mismo elemento DOM?

Question

Recientemente he aprendido (aquí en stackoverflow:)) que cuando se utiliza jQuery cada vez que escribo

$("...") 

una búsqueda DOM se realiza para localizar elementos coincidentes. Mi pregunta es muy simple: ¿cómo realizo eficientemente una serie de acciones (usando los buenos métodos de objetos jquery) en un elemento DOM que he localizado con jquery? En la actualidad, que estaba haciendo (por ejemplo):

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

Básicamente, siempre me refiero al elemento escribiendo $ ("# myDiv"). ¿Cómo puedo manipular repetidamente un elemento DOM (usando funciones jquery, en lugar de Javascript vainilla) de una manera eficiente? ¿Evita lo siguiente las costosas búsquedas DOM?

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

O debería intentar encadenar el lugar jQuery llama tanto como sea posible, por ejemplo:

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

Gracias por cualquier idea. :)

lara

Answer 1

Nadie ha vinculado jQuery Performance Rules todavía, así que entraré, ¡ya que es un gran artículo y una lectura obligada para los nuevos desarrolladores de jQuery!

Como verás, confirma tus sospechas: caching your jQuery objects al almacenarlos en variables es tan eficaz como encadenar.

Answer 2

Sí yo recomendaría usar el encadenamiento, debido a que los métodos de jQuery suelen volver el elemento modificado, por lo que no tiene que ser consultado en el DOM de nuevo. Y también me resulta más legible (ya sabes qué operaciones pertenecen a qué elemento).

Answer 3

Cada vez que utiliza una función jQuery, devuelve el objeto jQuery completo de la consulta inicial. Esto le permite encadenar acciones en conjunto, por lo que la consulta real solo ocurre la primera vez.

Según sus ejemplos, no parece que haya usado anteriorHtml, por lo que no necesita tomarlo en absoluto. Creo que puede hacer esto:

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

Answer 4

los dos son iguales.

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 

encadenamiento es exactamente el mismo porque los métodos de jQuery vuelven this, el objeto de que están unidos a:

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

puede probar esto con (myDiv === myDiv.html("bla bla bla"))

a responder a su pregunta ", que debería usar ": DRY (No repetir) Sugeriría encadenamiento. simplemente no olvide la legibilidad (no agrupe muchas llamadas de método en una sola línea; mi receta para legibilidad es anterior)

Answer 5

Depende de qué funciones esté llamando en ese elemento, ya que no todas las funciones devolverán el DOM elemento. Sin embargo, si todas las funciones que tiene que llamar siempre devolverán el elemento DOM, entonces ciertamente podría hacer que su código sea más legible.

Answer 6

Simplemente porque nadie lo mencionó, usar su primer método también funcionará y guardará la búsqueda DOM.

Sin embargo, encadenar, como dijeron los demás, sería la forma más "adecuada" de usar el mismo elemento y aplicarle diferentes acciones.

¡Buena suerte!

Answer 7

también estoy de acuerdo en que el encadenamiento es el mejor método a utilizar, pero algo más nadie tiene dirección aquí está utilizando .andSelf() (1) y .end() (2), mientras que el encadenamiento.

Lo siguiente agrega la clase "border" tanto al div como al p contenido dentro.

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

Usando .end() "reajusta" el selector

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

---

actualización: .andSelf() ya no se utiliza y, esencialmente, renombrado a .addBack(), lo utilizan de la misma manera.