How can I loop through three div boxes at the time

Question

I have a list of 12 posts wrapped in a div tag and the structure looks like this:

<div class="row">
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>
</div>

Is there a way I can loop every third div with the class of content in another div tag?

At the end I would have my structure like this:

<div class="row">
    <div class="wrapper">
        <div class="content">
        </div>
        <div class="content">
        </div>
        <div class="content">
        </div>
    </div>
    <div class="wrapper">
        <div class="content">
        </div>
        <div class="content">
        </div>
        <div class="content">
        </div>
    </div>
    <div class="wrapper">
        <div class="content">
        </div>
        <div class="content">
        </div>
        <div class="content">
        </div>
    </div>
    <div class="wrapper">
        <div class="content">
        </div>
        <div class="content">
        </div>
        <div class="content">
        </div>
    </div>
</div>

Is there a way I can loop every third div with the class of content in another div tag?

Possible duplicate of [Wrap every 3 divs in a div](https://stackoverflow.com/questions/3366529/wrap-every-3-divs-in-a-div) — Carsten Løvbo Andersen, Mar 26 '19 at 08:02
Just curious, how does this HTML getting rendered? If you plan to manipulate the HTML using Javascript after page load, user will face some inconsistency or flickering in the UI. I would have used some front end UI frameworks or template engine for rendering — Dipak, Mar 26 '19 at 08:04
Do you really need the change in structure? Or would it be sufficient, if you'd be able to change the presentation with CSS? I have the slight idea, that you are asking the wrong question. — yunzen, Mar 26 '19 at 08:13

Pranav C Balan · Answer 1 · 2019-03-26T08:13:43.100

You can do something like this

// get all element at position 1,4,7,...etc and iterate
$('.row .content:nth-child(3n + 1)').each(function() {
   $(this)
        // get all siblings next to it
        .nextAll('.content')
        // get only next 2 elements from it
        .slice(0, 2)
        // combine the current element with it
        .add(this)
         // wrap all elemnts with the div(3 divs)
        .wrapAll('<div class="wrapper">')
})

$('.row .content:nth-child(3n + 1)').each(function() {
  $(this).nextAll('.content').slice(0, 2).add(this).wrapAll('<div class="wrapper">')
})

console.log($('.row')[0].outerHTML)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
</div>

Or you can use jQuery :lt() pseudo-class selector to avoid slice() method.

$('.row .content:nth-child(3n + 1)').each(function() {
  $(this).nextAll('.content:lt(2)').add(this).wrapAll('<div class="wrapper">')
})

$('.row .content:nth-child(3n + 1)').each(function() {
  $(this).nextAll('.content:lt(2)').add(this).wrapAll('<div class="wrapper">')
})

console.log($('.row')[0].outerHTML)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
</div>

score 0 · Answer 2 · answered Mar 26 '19 at 08:08

Loop through the children, every third child create a new wrapper and add each child in the respective wrapper.

var test = document.querySelector("#test");
var index = 2;
for (var child of test.querySelectorAll(".content")) {
  if (index++ >= 2) {
    var newWrapper = test.appendChild(document.createElement("div"));
    newWrapper.className = "wrapper";
    index = 0;
  }
  test.removeChild(child);
  newWrapper.appendChild(child);
}
console.log(test.innerHTML);

<div class="row" id="test">
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
</div>

`test.removeChild(child);` is not necessary..., `newWrapper.appendChild(child);` this will move the actual dom element — Pranav C Balan, Mar 26 '19 at 08:26

score 0 · Answer 3 · answered Mar 26 '19 at 08:09

Try this

function WrapUpAllDivs(){
      var CurrentDivs = $(".row",".content");
        for(var i = 0; i < CurrentDivs.length -1 ; i+=3) {
          CurrentDivs
           .slice(i, i+3)
           .wrapAll("<div class=\"wrapper\"></div>"); 
    }
}

How can I loop through three div boxes at the time

3 Answers3