2012-10-10 14 views
5

Questo ciclo (vedere jsfiddle) tenta di aggiungere un tag <span> a un contenitore cinque volte. Ma lo fa solo una volta. Perché?Perché questo viene aggiunto solo una volta?

var myArr = [0,1,2,3,4]; 
var $span= $('<span></span>'); 
for (var i = 0; i < (myArr.length); i++) { 
    $('.contain').append($span); 
} 
+0

Non so perché, ma funziona se si cambia la linea 2 a 'var span class = " SPAN";'. – nickdos

+0

Interessante, l'ho provato sul mio codice (molto più complicato di questo demo), e il suggerimento nel commento sopra funziona. per esempio. aggiungi una stringa invece di un oggetto jQuery. Ci sono degli svantaggi nell'aggiungere una stringa a un oggetto jQuery o è una cattiva pratica? – brentonstrine

+0

Vorrei usare una stringa in questo caso. L'oggetto jQuery è utile quando si costruisce un elemento dom complesso in modo programmato (su più righe di codice) o se si utilizza jQuery per ottenere già un elemento dom dalla pagina. – nickdos

risposta

7

Il problema è che si aggiunge lo stesso elemento più volte.
Utilizzare clone per clonare l'elemento e quindi append.

$('.contain').append($span.clone());

demo

Aggiornamento:

In questo modo è possibile personalizzare il vostro elemento e poi clonarlo con tutte le proprietà.

var $span = $('<span/>', { 
        'class': 'someClass otherClass', 
        'css': { 
         'background-color': '#FF0000' 
        } 
      }); 
for (var i = 0; i < (myArr.length); i++) { 
    $('.contain').append($span.clone()); 
} 

demo2

Update2: secondo this commento.

$('.contain').append('<span class="yourClass"/>');

+1

o anche più semplice '$ ('. Contain'). Append ('');' e no $ span var – Fresheyeball

+0

@Fresheyeball Sono d'accordo in questo caso, ma in questo modo può personalizzare '$ span' e aggiungerlo con lo stesso stile più volte. –

+0

@RicardoLohmann non è possibile se viene aggiunta una stringa? Non potrei fare '.append ('')'? – brentonstrine

Problemi correlati