Menu
I am very confused as to why only the last element is inserted when I try to append multiple elements within a for loop.
I have created a JsFiddle showcasing my inability to get it to work. I expect 100 anchor tags to be inserted, yet only the last element is inserted.
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);
});
I want to insert all 100 elements into div.door_game:
<body>
<h1>Zonk!</h1>
<div class="door_game" data-doors="10">
</div>
</body>
811
So you can use list. append() to append a single value, and list. extend() to append multiple values.
You can append a list in for loop, Use the list append() method to append elements to a list while iterating over the given list.
To append multiple child elements with JavaScript, we can use the append method. Then we write: const listElement = document. querySelector('ul') const listItem = document.
It's because all your doors are sharing the same $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;
}
}
The Door $el is created once and that's why it is appended and appended again (i.e. moved again and again) so that you only see the last one. @plalx is right about it.
Morever, something very important since you append hundreds of doors, use a documentFragment (var frag = document.createDocumentFragment()) before the loop, to gather you doors (frag.appendChild(...)) and append this documentFragment to the Platform $el after the loop (this.$el.appendChild(frag)). The performance gain is very important with such amounts of elements.
And, don't hesitate to clone an element instead of rebuilding it. It 's much more faster. You can even use the DOM API cloneNode(false) method to do a not in depth copy of the original element.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
