Jak wstawiać wiele elementów do jednego elementu przez dodanie w pętli for?

Jestem bardzo zdezorientowany, dlaczego wstawiono tylko ostatni element, gdy próbuję dołączyć wiele elementów w pętli for.Jak wstawiać wiele elementów do jednego elementu przez dodanie w pętli for?

Stworzyłem JsFiddle, pokazując moją niezdolność do uruchomienia. Spodziewam się wstawienia 100 znaczników zakotwiczających, ale wstawiony jest tylko ostatni element.

Przez wzgląd na tylnej, oto jest istotne JavaScript, TODO wyznacza odpowiednią część:

Math.randomNumber = function(max) { 
    return Math.round(Math.random() * max % max); 
} 


var Door = { 
    $el: $('<a>', { 
     class: 'door selectable' 
    }), 
    number: null, 
    isSelected: false, 
    containsZonk: true, 
    bind: function() { 
     var that = this; 
     this.$el.on('click tap', function() { 
      that.isSelected = true 
     }); 
    } 
} 

var Platform = { 
    $el: null, 
    doorCount: null, 
    jackpotNumber: null, 
    doors: [], 
    init: function($el, doorCount) { 
     this.$el = $el; 
     this.doorCount = doorCount; 

     for (var i = 0; i <= doorCount - 1; i++) { 
      var door = Object.create(Door); 
      door.number = i; 
      door.$el.html(i.toString()); 
      this.doors.push(door); 

      /* TODO: wtf why is only last one inserted? */ 
      this.$el.append(door.$el); 
     } 

     this.jackpotNumber = Math.randomNumber(doorCount); 
     this.doors[this.jackpotNumber].containsZonk = false; 
    } 
} 
    $(document).ready(function(){ 
     var platform = Object.create(Platform); 
     var $game = $('.door_game'); 
     platform.init($game, 100); 
    });

chcę wstawić wszystkie 100 elementów w div.door_game:

<body> 
    <h1>Zonk!</h1> 
     <div class="door_game" data-doors="10"> 
     </div> 
</body>

Źródło

2013-04-14 k0pernikus

prawdopodobnie trzeba zmienić 'Math.round (Math.random() * 100% 100)' na 'Math.round (Math.random() * max% max)' – razzak

@razzak Tak, też to zauważyłem podczas przygotowywania pytania jeszcze nie było konieczne naprawienie mojego prawdziwego problemu. Dziękuję za to, że go wskazałem. – k0pernikus

również to nie ma sensu 'this.doors [this.jackpotNumber] .containsZonk = true;' gdy wszystkie obiekty 'door' mają tę własność' containsZonk: true, '! możesz to zmienić na 'cotainsZonk: false,'? – razzak

To dlatego wszystkie swoje drzwi dzielą ten sam $el.

http://jsfiddle.net/U9swZ/9/

var Door = { 
    number: null, 
    isSelected: false, 
    containsZonk: true, 
    bind: function() { 
     var that = this; 
     this.$el.on('click tap', function() { 
      that.isSelected = true 
     }); 
    }, 
    init: function() { 
     this.$el = $('<a>', { 
      class: 'door selectable' 
     }); 
     return this; 
    } 
}

Źródło

2013-04-14 14:05:28 plalx

Drzwi $ el jest tworzony raz i dlatego jest on dołączany i dołączany ponownie (to znowu i znowu przeniesiony) tak, że widać tylko ostatni. @plalx ma rację.

Morever, coś bardzo ważne ponieważ dołączyć setki drzwi, użyj documentFragment (var frag = document.createDocumentFragment()) przed pętli, aby zebrać Ci drzwi (frag.appendChild(...)) i dołączyć ten documentFragment do platformy $ el po pętli (this.$el.appendChild(frag)). Zwiększenie wydajności jest bardzo ważne przy takich ilościach pierwiastków.

I nie wahaj się sklonować elementu zamiast go odbudować. Jest o wiele szybciej. Można nawet użyć metody DOM API cloneNode(false), aby wykonać niezupełną kopię oryginalnego elementu.

Źródło

2013-04-14 14:20:41 lib3d

Nie skupiałem się na wydajności podczas odpowiadania, ale to zdecydowanie najlepsza praktyka. Dobrze, że o tym wspomniałeś. +1 – plalx

Nie chcę być zbyt dziwaczny, ale to jest raczej komentarz niż odpowiedź na pytanie. Cenię sobie wgląd, więc i tak dam +1. – k0pernikus

Wziąłem wolność, aby dodać przykład i porównać czasy. Dziękuję za nauczenie mnie o koncepcji :) – k0pernikus

Jak wstawiać wiele elementów do jednego elementu przez dodanie w pętli for?

Odpowiedz

Powiązane problemy