2012-03-10 4 views
5

Ho un ciclo for per generare una fila di div s, il mio codice èjQuery - gruppo o concatenare jquery oggetti creati da un ciclo, in modo da usare appendTo solo una volta

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

Questo codice sembra a cercare #container per ogni iterazione e aggiunge un nuovo div ad esso.

Come scrivere il codice in modo da poter creare prima tutti i div e quindi aggiungerli al contenitore tutto in una volta? Spiacenti, ho provato a cercare parole chiave come concatenare/raggruppare/aggiungere oggetti jQuery e sembra che non abbiano i risultati di ricerca corretti.

TIA

+0

Perché si desidera che il codice chiami solo "appendTo" una volta? – JaredPar

+1

@JaredPar, perché a quanto ho capito, jquery deve solo cercare il div corretto una volta invece di molte volte come l'iterazione del ciclo. – Jamex

risposta

7

soluzione di Xander dovrebbe funzionare bene. Personalmente non mi piace lavorare con stringhe HTML "lunghe" in js. Ecco una soluzione che sembra più simile al tuo codice.

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

Grazie Justin, questo è un po 'quello che avevo in mente. Mi chiedo se ci sia un altro modo di raggruppare oggetti, poiché questo metodo introduce una matrice che potrebbe tassare le risorse. – Jamex

+0

Sì, potresti potenzialmente pagare una leggera tassa sulla creazione di oggetti jQuery. Tuttavia, si ottengono ulteriori benefici di eventi più facilmente vincolanti (probabilmente si vorrebbe delegare gli eventi se sono gli stessi per ogni elemento), in più in questo modo si ottiene il vantaggio aggiuntivo di creare una chiusura su quegli eventi (non dimostrato qui), se necessario. Non penso che vedrete alcun miglioramento delle prestazioni fino a raggiungere migliaia di elementi. –

+0

Ciao Justin, il codice funziona, ma non capisco la riga elements.push (currentElement [0]); Perché currentElement ha il [0]? – Jamex

4

Questo potrebbe aiutare

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

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

Grazie Jose/Xander, non volevo davvero farlo in quel modo perché non volevo rovinare la scrittura della stringa di testo. Penso che il codice di Justin sia più di quello che avevo in mente. – Jamex

+1

OTOH, la creazione della variabile stringa dovrebbe essere meno gravosa rispetto agli oggetti jQuery. – Jamex

Problemi correlati