多次顯示元素

Question

我試圖用jQuery多次顯示一個小框。我的目標是像一個for循環

<span class="box_counter"></span> 


.box_counter { 
    float: left; 
    width: 10px; 
    height: 10px; 
    margin: 40px 0px 0px 250px;  
    background-color: black; 
} 

所以像（僞代碼）

for (index != total) 
    push.box_counter 
    index++ 

JSFIDDLE

Answer 1

簡單地克隆元素，之後在DOM添加副本JSFIDDLE

$(function() { 
    var total = 20; 

    for (var i=0; i<total; i++) { 
     $boxCntr = $(".box_counter").first().clone(true); 
     $(".box_counter").last().after($boxCntr); 
    } 
}); 

Answer 2

創建循環的元素。例如：

for (var i = 0; i < 10; i++) { 
    $(document.body).append($('<span>').addClass('box_counter')); 
} 

演示：http://jsfiddle.net/WUYfW/2/