jsFiddle

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

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

E.g：

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

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

我是在你的小提琴中做到的，但它确实有效，但由于某些风格的东西，它不会看起来像一样：Updated Fiddle

上面的代码非常重要，因为该代码会立即运行，所以上面的代码位于之后的元素中。在你的小提琴中，这是因为你正在使用jsFiddle的脑死亡令人惊讶的默认设置，它将你的代码放在window#load处理程序中。在您的真实网页上，您可能需要确保元素后script标记为。（或者使用ready，但如果您控制script代码的位置，则无需执行此操作。）

Answer 2

你必须克隆每个循环

(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

Answer 3

这是一个正常运行的简化版本，您可以在此处查看：http://jsfiddle.net/utZRJ/2/

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

无法让.clone（）工作

3 个答案:

jsFiddle