Question

I would like to be able to group elements into groups of 4 or as close to 4 as possible. Assuming my html looks something like:

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

I would like the output to be:

<div class="container">
    <div class="section">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="section">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

In a perfect world, I would just change the html but I can’t in this case because it is being generated server side. I think nextUntil() is what I want but I’m not sure how to implement it.

Answer 1

Try this:

var $items = $('.container div.items');

for (var i = 0; i < $items.length; i+=4) {
  $items.slice(i, i+4).wrapAll('<div class="section"/>')
}

​DEMO