jquery - 如何创建 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 col 之后添加行，最终结果将是：

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

});

--- 观看现场演示 ---

Answer 2

你应该$('selector').each()看看

http://api.jquery.com/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

});