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

假设“col的数量不是常数”，你指的是总量，而不是每行应该有多少列。

以下假设一行中最多应有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

您应该看一下$('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

});

如何创建divs容器？

2 个答案: