jQuery nth child trouble

Question

Hi,

I'm trying to wrap every set of three .item divs in a larger div, how can I do that?

Original:

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

After jQuery:

<div class="row">
    <div class="item">..</div>
    <div class="item">..</div>
    <div class="item">..</div>
</div>
<div class="row">
    <div class="item">..</div>
    <div class="item">..</div>
    <div class="item">..</div>
</div>

I'm having trouble figuring out the nth child equation - any help?

Answer 1

You can do it using .slice() and .wrapAll() like this:

var divs = $("div.item");
for(var i = 0; i < divs.length; i += 3) {
  divs.slice(i, i+3).wrapAll("<div class='row'></div>");
}

You can test it here