如何創建div容器？

Question

我有代碼看起來像這樣：

<div class="items"> 
    <div class="col"></div> 
    <div class="col"></div> 
    <div class="col"></div> 
    <div class="col"></div> 
    <div class="col"></div> 
    <div class="col"></div> 
    <div class="col"></div> 
    <div class="col"></div> 
</div> 

我想經過3欄添加一行最後的結果將是：

<div class="items"> 
    <div class="row"> 
     <div class="col"></div> 
     <div class="col"></div> 
     <div class="col"></div> 
    </div> 
    <div class="row"> 
     <div class="col"></div> 
     <div class="col"></div> 
     <div class="col"></div> 
    </div> 
    <div class="row"> 
     <div class="col"></div> 
     <div class="col"></div> 
    </div> 
</div> 

我必須這樣做，使用jQuery。 col的數量不是恆定的。請幫助

Answer 1

假設「列數不恆定」，您指的是總量，而不是每行應包含多少列。

下面假設應該有一排最多3列：

$(function(){ 

    $(".col").each(function(i,v){ 
     var $row; 
     if ((i % 3) == 0){ 
      $row = $("<div/>"); 
      $row.addClass("row"); 
      $(".items").append($row); 
     } 
     else 
     { 
      $row = $(".items .row:last"); 
     } 
     $row.append($(this)); 
    }); 

}); 

--- See Live Demo ---

Answer 2

你應該在

http://api.jquery.com/each/

上$('selector').each()了一眼，這函數，你可以遍歷你的items-div。

僞代碼：

$('.items .col').each(function(index) { 

    // index is a counter helping you 

    // $(this) is the element at the current index 

    // the rest is just logical thinking 

});