2

I have following condition in which what i want is when my child div's first class col-md-4 and beneath div class's numeric digits 4+4+4 >= 12 then wrap those in div having class row.Fidle of my problem 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>

now i want to wrap divs in a row when my count of inner div's class is 12. like this 

<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>

Code i have tried : 

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


    });

and its not giving desired result , its not adding first row .

<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>
4

2 回答 2

2

我知道了：

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


});
于 2013-10-18T11:47:10.780 回答
0

我的猜测是在这一行：

 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添加代码，我们会更容易看到。

于 2013-10-18T10:26:39.500 回答