如何创建 div 容器？ [复制]答案

【问题标题】：How to create divs containers? [duplicate]如何创建 div 容器？ [复制]
【发布时间】：2013-08-25 11:12:42
【问题描述】：

我的代码如下所示：

<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的数量不是恒定的。请帮忙

【问题讨论】：

在 wat 的基础上，您将添加课程 row ..
澄清一下，您想使用 Jquery 将容器 div 添加到所有具有“col”类的 div 中，但是以 3 为一组？到目前为止，您尝试过什么？
请贴出您尝试过的代码。作为一个 jsfiddle 会很棒。
看看：stackoverflow.com/questions/11376256/…
抱歉，您能解释一下您正在尝试做什么吗？您想要一个函数在某个索引处添加 (X) 个 <div class="col"></div> 吗？

标签： jquery css

【解决方案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 ---

【讨论】：

【解决方案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

});

【讨论】：