使用jquery追加一定數量的項目列表

Question

我有100個項目 - 小孩的說span標籤。

我如何將每個項目（每次5個）在新的內部div中使用jquery添加方法？

$.each(items, function (x, result) { 

    append to outer-div 5 at a time, each set of spans is inside an inner-div 

} 

<div class="outer-div> 
    <div class="inner-div"> 
    <span>1</span> 
    <span>2</span> 
    <span>3</span> 
    ... etc. 
    <span>5</span> 
    </div> 
    <div class="inner-div> 
    <span>11</span> 
    <span>12</span> 
    <span>13</span> 
    ... etc. 
    <span>5</span> 
    </div> 
    ...etc... 
</div> 

Answer 1

像這樣的事情會使用數字標識符，以保持你做多少循環的軌道，創建容器時i爲1，各span元素添加到文檔中的最後.inner-div，並重置要創建當它達到你的極限，因此將引發新.inner-div計數器：

var i = 1; 
$.each(items, function(x, result) { 
    // create the container div 
    if(i == 1) { 
     $('<div/>').addClass('inner-div').appendTo('.outer-div'); 
    } 
    // create child and add to container 
    $('.inner-div') 
     .last() 
     .append(
      $('<span/>').text(result) 
     ); 

    // reset the counter when limit reached 
    if(i == 5) { 
     i = 1; 
    } else { 
     // increment counter 
     i++; 
    }  
}); 

這裏有一個演示：fiddle