当我尝试在for循环中追加多个元素时,为什么只插入最后一个元素,我感到非常困惑。
我创建了一个JsFiddle来展示我无法让它发挥作用。我希望插入100个锚标签,但只插入最后一个元素。
<小时/> 为了后面的缘故,这里是相关的JavaScript,TODO标志着相关部分:
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);
});
我想将所有100个元素插入div.door_game
:
<body>
<h1>Zonk!</h1>
<div class="door_game" data-doors="10">
</div>
</body>
答案 0 :(得分:6)
这是因为你所有的门都是共享$el
。
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;
}
}
答案 1 :(得分:2)
门$ el创建一次,这就是为什么它会被追加并再次附加(即一次又一次地移动),这样你才能看到最后一个。 @plalx是对的。
更重要的是,因为你附加了数百个门,在循环之前使用documentFragment(var frag = document.createDocumentFragment()
),收集你的门(frag.appendChild(...)
)并将此文档片段附加到平台$ el之后非常重要循环(this.$el.appendChild(frag)
)。对于如此多的元素,性能提升非常重要。
并且,不要犹豫克隆元素而不是重建元素。它要快得多。您甚至可以使用DOM API cloneNode(false)
方法对原始元素进行深度复制。