如何在for循环中通过追加将多个元素插入到一个元素中
How to insert multiple elements into one element via append in a for loop?
当我尝试在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>
这是因为你所有的门都共用同一个$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;
}
}
Door $el被创建一次,这就是为什么它被追加和追加一次(即一次又一次地移动),所以你只看到最后一个。@plalx是对的。
此外,一些非常重要的东西,因为你附加了数百个门,在循环之前使用documentFragment (var frag = document.createDocumentFragment()
)来收集你的门(frag.appendChild(...)
),并在循环之后将这个documentFragment附加到Platform $el (this.$el.appendChild(frag)
)。对于如此多的元素,性能增益是非常重要的。
并且,不要犹豫克隆元素而不是重新构建它。它要快得多。您甚至可以使用DOM API cloneNode(false)
方法对原始元素进行非深度复制。
相关文章:
- 将html元素插入到文本字符串中,以匹配另一个html字符串
- JavaScript-在不影响索引的情况下将元素插入数组
- 仅为可见元素插入计数
- 将元素插入页眉
- Javascript:如果数组元素已填充,则为数组的每个元素插入表行
- AngularJS:如何将ng-click绑定到使用嵌入或对象元素插入的SVG图像
- 如何将元素插入 JSON 数组
- 为什么我的 HTML 按钮刷新页面?/为什么我不能让我的新 HTML DOM 元素插入到我的页面中
- 当 Javascript 中的 POST ID 元素插入 PDO 时,数据库中没有结果
- 拼接函数将相同的元素插入每个索引
- Javascript 将元素插入 char Ref 到带有子元素的可编辑 DIV 中
- 如何将SVG元素插入到带有JavaScript的组中
- 什么's是将数组中的元素插入到现有Html元素中的有效方法
- 如何将新元素插入'这'子元素Jquery
- 尝试从AngularJS中的控制器($scope)将元素插入到视图(HTML)中
- 将脚本元素插入浏览器操作页无效
- 循环遍历对象数组并将每个元素插入到html中
- jQuery/Javascript向元素插入属性
- 将元素插入DOM,位置基于时间戳
- 条件模板元素插入的EmberJS回调