Не удается получить .clone() для работы

Question

Это может быть глупый вопрос, но я пытаюсь скопировать div (div.frame) 8 раз в его родительский (div#game), но его не работает.

EDIT: div.frame не копируется вообще. Даже console.log(frameClone); показывает странно результата

FIDDLE

---

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); 

я, что в вашей скрипке, и она работает, но это не выглядеть как это работает из-за какой-то стиль вещи: Updated Fiddle

Это важно, чтобы код выше находится в теге скрипта после элементов, на которых он работает, потому что этот код запускается немедленно. В вашей 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); 
}