如何通过在 for 循环中追加将多个元素插入一个元素？答案

【问题标题】：How to insert multiple elements into one element via append in a for loop?如何通过在 for 循环中追加将多个元素插入一个元素？
【发布时间】：2013-04-06 15:53:48
【问题描述】：

我很困惑为什么当我尝试在 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>

【问题讨论】：

您可能需要将Math.round(Math.random() * 100 % 100) 更改为Math.round(Math.random() * max % max)
@razzak 是的，我在准备问题时也注意到了这一点，但没有必要解决我真正的问题。尽管如此，还是感谢您指出这一点。
当所有door 对象都具有此属性containsZonk: true, 时，这也没有意义this.doors[this.jackpotNumber].containsZonk = true;！你可能想把它改成cotainsZonk: false,？
@razzak 是的，你又是对的。 :D

标签： javascript jquery append

【解决方案1】：

这是因为你所有的门都共享同一个$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;
    }
}

【讨论】：

【解决方案2】：

Door $el 被创建一次，这就是为什么它会被附加并再次附加（即一次又一次地移动），因此您只能看到最后一个。 @plalx 是对的。

此外，由于您附加了数百个门，因此非常重要，请在循环之前使用 documentFragment (var frag = document.createDocumentFragment()) 来收集门 (frag.appendChild(...)) 并在循环后将此 documentFragment 附加到 Platform $el (@ 987654324@)。使用如此多的元素，性能提升非常重要。

而且，不要犹豫，克隆一个元素而不是重建它。它要快得多。您甚至可以使用 DOM API cloneNode(false) 方法对原始元素进行非深度复制。

【讨论】：

我的重点不是回答时的表现，但这绝对是最佳实践。很好，你提到了它。 +1
我不想过于挑剔，但这更像是一个评论而不是问题的答案。我确实重视洞察力，所以无论如何我都会给你 +1。
我冒昧的加个例子，对比一下时间。谢谢你教我这个概念:)
我的编辑被拒绝了。也许你想在你的答案中引入一个实现：stackoverflow.com/review/suggested-edits/1919574