jQuery .append() in der for-Schleife

Habe ich versucht nach einer Antwort zu suchen hier, aber alle Fragen in Bezug auf mein Problem ein bisschen zu kompliziert für jemanden, der gerade angefangen JavaScript lernen wie ich.

Erstellen Sie ein raster von divs mit js/jquery basierend auf Benutzereingaben (z.B.: wenn der Benutzer wählt, Breite = 16, dann wird er eine 16x16-raster).

Nun, dachte ich, ich werde fügen Sie ein DOM-element mit var $smallDiv = $('<div class="smallDiv"></div>');

Und hier ist die Schleife fügt hinzu, dass die benötigte Anzahl von divs, basierend auf Benutzer-input:

function addDiv() {
$('#container').append($smallDiv);
}
for (i = 1; i <= divCounter * divCounter; i++){
addDiv();
}

Das problem ist, dass dies immer nur ein div. Die Schleife ausgeführt, die erforderliche Anzahl von Zeiten, ich habe dies über die Konsole.log(). So ist es ganz offensichtlich funktioniert, aber ich bekomme das Gefühl, dass jedes mal, wenn Sie es Schleifen, das neue div-Element überschreibt das Vorherige. Das war nicht meine Erwartung .append().

Ich habe es geschafft zu bekommen, um das problem, indem Sie die $smallDiv variable eine normale (entfernen $ aus dem Wert, so dass es nur text), aber ich würde gerne wissen, wie sind diese beiden Variablen sind die Unterschiede und warum arbeitet man im obigen Szenario, aber die anderen nicht.

Machen und es einfach auf mich, ich habe gerade angefangen zu lernen, JS/jQuery.

Hinzufügen Sie können komplett, HTML-und JS

InformationsquelleAutor Lessar277 | 2015-09-08

  1. 2

    In der Loop-Schleife anfügen der gleichen dom-element Verweis($smallDiv) mehrere Male, was bedeutet, das element wird nur einmal Hinzugefügt werden.

    Anstatt in jeder iteration der Schleife, erstellen Sie eine neue Instanz - die Sie verwenden können, .clone () - zu tun.

    function addDiv() {
    $('#container').append($smallDiv.clone());
}
    A. Sie müssen zum verwenden von geschachtelten Schleife zu erstellen, die mehrere Zeilen, aber nicht nur 1. B. Eine bessere Art und Weise zu generieren, die vollständige html-und nur als hängen Sie an `#container', weil die meisten "heavy" - Aktion ist die DOM-manipulation, und es ist besser, es zu tun, als weniger wie möglich.
    href="http://jsfiddle.net/arunpjohny/oLywc4gr/1/" >jsfiddle.net/arunpjohny/oLywc4gr/1
    Besser ist, können Sie Kommentar hinzufügen A an der fiddle und es wird perfekt sein 🙂

    InformationsquelleAutor Arun P Johny

  2. 0

    Als alternative zu Arun P Johny Lösung, diese scheint zu funktionieren:

    var smallDiv = '<div class="smallDiv"></div>'

function addDiv() {
    $('#container').append(smallDiv);
}

for (i = 1; i <= divCounter * divCounter; i++){
    addDiv();
}

    Diese Weise nicht die gleichen dom-element, sondern stattdessen verwenden wir eine einfache string-append.

    InformationsquelleAutor Artur Käpp

Schreibe einen Kommentar