Question

I have a set of selected elements in jQuery:

<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>

I would like to wrap these elements into groups of five like so:

<div class="wrapper">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
</div>
<div class="wrapper">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
</div>
<div class="wrapper">
    <div class="element"></div>
    <div class="element"></div>
</div>

Is there an efficient/easy way to do this? I imagine it would look something like this:

$('.element').wrapAll('<div class="wrapper"></div>');

But with a selector that selects the elements in groups of five.

Thanks!

Answer 1

You can do it a bit mote compact like this:

var elems = $('.element');
for(var i = 0; i <= elems.length; i+=5) {
  elems.slice(i, i+5).wrapAll('<div class="wrapper"></div>');
}

This results in the exact result you have in the question 🙂 You can make that 5 a variable and wrap the number of children you want, the remainder (in this case the last 2) will be wrapped in their own wrapper at the end.