2012-10-10 19 views
5

Ta pętla (patrz jsfiddle) próbuje pięciokrotnie dołączyć do kontenera etykietę <span>. Ale robi to tylko raz. Czemu?Dlaczego to jest dołączane tylko raz?

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

Nie wiem dlaczego, ale to działa w przypadku zmiany linii 2 do 'var rozpiętości = " SPAN";'. – nickdos

+0

Interesujące, przetestowałem to na moim (dużo bardziej skomplikowanym niż ten demo) kodzie, a sugestia w powyższym komentarzu działa. na przykład dopisz ciąg zamiast obiektu jQuery. Czy są jakieś wady dołączania ciągu znaków do obiektu jQuery, czy też jest to zła praktyka? – brentonstrine

+0

W tym przypadku użyłbym ciągu znaków. Obiekt jQuery jest dobry, gdy budujesz złożony element domowy programowo (w wielu wierszach kodu) lub jeśli użyłeś jQuery, aby uzyskać już element dom ze strony. – nickdos

Odpowiedz

7

Problem polega na tym, że wielokrotnie dodajesz ten sam element.
Użyj clone do sklonowania elementu, a następnie append.

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

demo

Aktualizacja:

W ten sposób można dostosować element, a następnie sklonować go ze wszystkimi właściwościami.

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

demo2

Update2: według this komentarza.

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

+1

lub jeszcze prostsze '$ ('. Include'). Append ('');' i nie $ span var – Fresheyeball

+0

@Fresheyeball Zgadzam się w tym przypadku, ale w ten sposób może on dostosować '$ span' i dołączyć go do ten sam styl wiele razy. –

+0

@RicardoLohmann nie jest to możliwe, jeśli ciąg znaków jest dołączany? Nie mogłem zrobić '.append ('')'? – brentonstrine

Powiązane problemy