2012-03-10 8 views
5

Tengo un bucle for para generar una fila de div s, mi código esjquery - grupo o jquery concatenar objetos creados por un bucle, por lo que utilizar appendTo sola vez

for(j=0; j<7; j++) { 
    $('<div/>', { 
    id: 'unique', 
    html: 'whatever' 
}).appendTo('#container'); 

Este código parece buscar #container para cada iteración y le agrega un nuevo div.

¿Cómo se escribe el código para que pueda ir a crear todos los divs primero y luego anexarlos al contenedor todos a la vez? Lo siento, traté de buscar palabras clave como concatenar/agrupar/agregar objetos jquery, y no parezco tener los resultados de búsqueda correctos.

TIA

+0

¿Por qué quiere que el código solo llame a 'appendTo' una vez? – JaredPar

+1

@JaredPar, porque según tengo entendido, jquery solo tiene que buscar el div correcto una vez, en lugar de muchas veces, como iteración del ciclo. – Jamex

Respuesta

7

solución de Xander debería funcionar bien. Personalmente, no me gusta trabajar con cadenas de texto 'largas' en js. Aquí hay una solución que se parece más a tu código.

var elements = []; 
for(j=0; j<7; j++) { 
    var currentElement = $('<div>', { id: i, text: 'div' }); 
    elements.push(currentElement[0]); 
} 
$('#container').append(elements); 
+0

Gracias Justin, esto es un poco lo que tenía en mente. Me pregunto si existe otra forma de "agrupar" objetos, ya que este método introduce una matriz que podría gravar los recursos. – Jamex

+0

Sí, podría pagar un pequeño impuesto sobre la creación de objetos jQuery. Sin embargo, obtienes beneficios adicionales de eventos vinculantes más fáciles (es probable que quieras delegar los eventos si son los mismos para cada elemento), además de que esto te brinda el beneficio adicional de crear un cierre en esos eventos (no demostrado aquí), si es necesario. No creo que veas ningún aumento de rendimiento hasta que llegues a miles de elementos. –

+0

Hola Justin, el código funciona, pero no entiendo la línea elements.push (currentElement [0]); ¿Por qué currentElement tiene el [0]? – Jamex

4

Esto podría ayudar a

var htm = ''; 
for(j=0; j<7; j++) { 
    htm+= '<div id="unique_'+i+'">whatever</div>'; 
} 

$('#container').html(htm); // Or append instead of html 
+0

Gracias Jose/Xander, realmente no quería hacerlo de esa manera porque no quería meterme con escribir la cadena de texto. Creo que el código de Justin es más de lo que tenía en mente. – Jamex

+1

OTOH, la creación de la variable de cadena debe ser menos exigente que los objetos jquery. – Jamex

Cuestiones relacionadas