¿Cómo funciona la función jQuery pushStack?

Tengo problemas para entender la función jQuery pushStack (documentada en http://api.jquery.com/pushStack/). Intenté agregar una lista de elementos a un selector en este violín.¿Cómo funciona la función jQuery pushStack?

http://jsfiddle.net/johnhoffman/hTh8D/

JS:

$(function() { 
    var listStuff = $("p"); 
    listStuff.pushStack($("div")); 
    listStuff.css("color", "#f00");   
});

HTML:

<p>foo</p> 
<div>bar</div>

Sin embargo, el texto del elemento div no es de color rojo. ¿Qué significa empujar un elemento en una pila jQuery?

Fuente

2012-04-17 John Hoffman

Aunque es vago, es conciso (como es el ejemplo). Presiona los elementos ** DOM ** en la pila, no los elementos envueltos en jQuery. –

Gracias, ¿cuál es la diferencia? –

posible duplicado de [jQuery pushStack] (http://stackoverflow.com/questions/4399055/jquery-pushstack) – Mottie

.pushStack() crea un nuevo objeto jQuery que hereda el estado de un objeto jQuery anterior.

Este estado heredado permite que métodos como .end() y .self() funcionen correctamente. En su ejemplo de código particular, no está utilizando el valor de retorno de .pushStack() que es el nuevo objeto jQuery.

Al trabajar con objetos jQuery, es importante saber que la mayoría de las operaciones que cambian los objetos DOM en un objeto jQuery devuelven un nuevo objeto jQuery con el cambio en vez de modificar el objeto jQuery existente. Es esta característica de diseño la que les permite mantener esta pila de objetos jQuery previamente modificados.

En su caso, no creo que necesite usar .pushStack() y probablemente pueda simplemente usar .add() (que también devuelve un nuevo objeto jQuery) pero no está exactamente claro para mí lo que está intentando para hacerlo, no estoy seguro exactamente qué código recomendar.

Para lograr el resultado final HTML que mostró en su pregunta, usted puede hacer esto:

$(function() { 
    $("p").add("div").css("color", "#f00").appendTo(document.body);   
});

Se podría, obviamente, cambiar el .appendTo() a lo que usted va a hacer con los nuevos objetos DOM.

En sus comentarios, preguntó algo más sobre cuándo se usaría pushStack(). Creo que el uso principal es en los métodos jQuery que devuelven un nuevo objeto jQuery. En ese caso, usted crea la nueva lista de elementos que desea en el nuevo objeto jQuery y luego, en lugar de convertirlo en un objeto jQuery normal y devolverlo, llama al return this.pushStack(elems). Esto termina creando un nuevo objeto jQuery y devolviéndolo, pero también vincula ese nuevo objeto al objeto anterior para que los comandos especiales como .end() puedan funcionar cuando se usan en el encadenamiento.

El método jQuery .add() es un ejemplo clásico. En pseudocódigo, lo que hace es esto:

add: function(selector, context) { 
    // get the DOM elements that correspond to the new selector (the ones to be added) 
    // get the DOM elements from the current jQuery object with this.get() 
    // merge the two arrays of elements together into one array 
    return this.pushStack(combinedElems); 
}

Fuente

2012-04-17 19:28:57 jfriend00

¡Gracias! Eso tiene sentido. Mi fin era solo averiguar cómo usar pushStack.¿Hay una función correspondiente de "begin()" entonces - o PushStack es esencialmente la función que comienza con un nuevo "frame" en la pila? No pude encontrar uno en ninguna parte. –

@JohnHoffman - 'pushStack()' es como 'begin()'. Crea un nuevo objeto jQuery que está vinculado al anterior. No tiene que usar 'pushStack()', puede simplemente crear un nuevo objeto jQuery, pero usar 'pushStack()' permite que los comandos como '.end()' funcionen debido al conocimiento de las versiones previamente vinculadas. Es un patrón de uso bastante avanzado que no es necesario para el uso normal de jQuery. – jfriend00

@JohnHoffman - 'pushStack()' tiene más sentido encadenar cuando devuelve un objeto jQuery desde un método jQuery, por lo tanto, se usa normalmente en la implementación interna de métodos jQuery o al crear nuevos métodos jQuery que dan como resultado un nuevo jQuery objeto. Nunca lo he visto usado fuera de un método jQuery. – jfriend00

No está empujando el objeto, intente esto:

$(function() { 
var listStuff = $("p"); 
listStuff.css("color", "#f00");   
this.pushStack(listStuff.get()); 
});

Fuente

2012-04-17 19:26:45

¿Cómo funciona la función jQuery pushStack?

Respuesta

Cuestiones relacionadas