jquery - 无法让 .clone() 工作

Question

这可能是一个愚蠢的问题，但我一直在尝试将 div ( div.frame) 复制 8 次到其父级 ( div#game) 中，但它不起作用。

编辑：div.frame根本没有复制。甚至console.log(frameClone);显示奇怪的结果

小提琴

---

jQuery

(function($) {
    var $game1 = $('div#game1');
    var frameClone = $('div.frame').clone();

    for (var i = 0; i < 8; i++) {
        // frameClone.appendTo('div#game1');
        // frameClone.appendTo($game1);
        // $game1.append(frameClone[0]);
        // $game1.append(frameClone);
        // none of these work
    }

    var $frame = $('div.frame');

})(jQuery);

HTML

<div id="game1">
    <!-- this is one frame. Its cloned and repeated 8 more times -->
    <div data-win="-" class="frame">
        <div class="winsign"></div>
        <div data-sign="-" class="signbox"></div>
        <div data-sign="-" class="signbox"></div>
        <div data-sign="-" class="signbox"></div>
        <div data-sign="-" class="signbox"></div>
        <div data-sign="-" class="signbox"></div>
        <div data-sign="-" class="signbox"></div>
        <div data-sign="-" class="signbox"></div>
        <div data-sign="-" class="signbox"></div>
        <div data-sign="-" class="signbox"></div>
    </div>
</div>

Answer 1

您必须在每个循环中克隆它，否则您只需将克隆从父级移动到父级。

例如：

(function ($) {
    var $game1 = $('div#game1');
    var $frame = $('div.frame');

    for (var i = 0; i < 8; i++) {
        $frame.clone().appendTo($game1);
    }
})(jQuery);

我在你的小提琴中做到了，它有效，但由于一些风格的东西，它看起来不像是有效的：更新的小提琴

重要的是，上面的代码位于它所操作的元素之后的脚本标记中，因为该代码会立即运行。在您的 Fiddle 中，发生这种情况是因为您使用 jsFiddle令人震惊的默认设置，该设置将您的代码放入window#load处理程序中。在您的真实页面上，您可能需要确保script标签位于元素之后。（或使用，但如果您控制标签ready的位置，则不必这样做。）script

Answer 2

这是一个可以正常运行的简化版本，你可以在这里看到它：http: //jsfiddle.net/utZRJ/2/

var $game1 = $('div#game1');
for (var i = 0; i < 8; i++) {
    $('div.frame').eq(0).clone().appendTo($game1);
}

Answer 3

您必须在每个循环中克隆它

(function ($) {
    var $game1 = $('div#game1');

    for (var i = 0; i < 8; i++) {
        var frameClone = $('div.frame').first().clone();
        frameClone.appendTo($game1);
    }
})(jQuery);

如果你真的想缩短它：

(function ($) {
    for (var i = 0; i < 8; i++) $('div.frame').first().clone().appendTo($('#game1'));
})(jQuery);

jsFiddle