5

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>
4

2 に答える 2

6

これは、すべてのドアが同じ を共有しているため$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;
    }
}
于 2013-04-14T14:05:28.917 に答える
2

Door $el は 1 回作成されるため、最後の 1 つだけが表示されるように、追加と追加が繰り返されます (つまり、何度も移動されます)。@plalxはそれについて正しいです。

さらに、何百ものドアを追加var frag = document.createDocumentFragment()し、ループの前に documentFragment ( ) を使用してドア ( ) を収集frag.appendChild(...)し、ループ ( ) の後にこの documentFragment を Platform $el に追加するので、非常に重要なことですthis.$el.appendChild(frag)。このような量の要素では、パフォーマンスの向上が非常に重要です。

また、要素を再構築するのではなく、複製することをためらわないでください。はるかに高速です。DOM APIcloneNode(false)メソッドを使用して、元の要素の深さのないコピーを行うこともできます。

于 2013-04-14T14:20:41.087 に答える