Question

我有以下条件，其中我想要的是当我的孩子div的第一个班级col-md-4并且在div类的数字4 + 4 + 4＆gt; = 12之后然后将那些包裹在具有类行的div中.Fidle of我的问题Fiddle

<div class="row questionsRows">
    <div class="col-md-4 coulmnQuestions"></div>
     <div class="col-md-4 coulmnQuestions"></div>
    <div class="col-md-4 coulmnQuestions"></div>
    <div class="col-md-4 coulmnQuestions"></div>
    <div class="col-md-4 coulmnQuestions"></div>
</div>

现在我想在内部div类的计数为12时将div包装成一行。像这样

<div class="row questionsRows">
  <div class="row">
        <div class="col-md-4 coulmnQuestions"></div>
         <div class="col-md-4 coulmnQuestions"></div>
        <div class="col-md-4 coulmnQuestions"></div>
  </div>
  <div class="row">
        <div class="col-md-4 coulmnQuestions"></div>
         <div class="col-md-4 coulmnQuestions"></div>

  </div>
</div>

我试过的代码：

function WrapRows() {

    var RowComplete = 0;
    var divs;
    $('.questionsRows').children('.coulmnQuestions').each(function () {
        debugger;
        var classes = $(this).attr("class").split(" ");
        var getFirstClass = classes[0];
        var value = getFirstClass.slice(7);

        RowComplete = RowComplete + value;
        divs = $(this).add($(this).next());

       if (RowComplete >= 12) 
       {
           divs.wrapAll('<div class="row"></div>');
           RowComplete = 0;
       }


    });

并且没有给出期望的结果，它没有添加第一行。

<div class="row questionsRows">
<div class="col-md-4 coulmnQuestions"></div>
  <div class="row">

         <div class="col-md-4 coulmnQuestions"></div>
        <div class="col-md-4 coulmnQuestions"></div>
  </div>
</div>

Answer 1

我明白了：

var RowComplete = 0;
var divs;
$('.questionsRows').children('.coulmnQuestions').each(function () {

    var classes = $(this).attr("class").split(" ");
    var getFirstClass = classes[0];
    var value = parseInt(getFirstClass.slice(7));

    if(RowComplete==0) {
        divs = $(this);   
    } else {
        divs = divs.add($(this))
    }

    RowComplete = RowComplete + value;

    console.log(RowComplete)       

   if (RowComplete >= 12) 
   {
       console.log(divs)
       divs.wrapAll('<div class="wrapper"></div>');
       RowComplete = 0;
   }


});

Answer 2

我的猜测就是这一行：

 divs = $(this).add($(this).next());

您正在捕捉<div class="col-md-4 coulmnQuestions"></div>的下一个标记，您应该获得相同的标记，我的意思是<div class="col-md-4 coulmnQuestions"></div>标记。所以我会这样做：

 divs = $(this).add($(this));

无论如何，如果您在http://jsfiddle.net添加代码，我们会更容易看到。

根据引导行条件包装div

2 个答案: