How to wrap every 4 elements in a <li> tag with jquery?

Question

I need to wrap every 4 .product divs in a row within a <li> tag so that when there's:

<ul>
  <div class="product">...</div>
  <div class="product">...</div>
  <div class="product">...</div>
  <div class="product">...</div>
  <div class="product">...</div>
  <div class="product">...</div>
</ul>

it gets turned in to a:

<ul>
  <li>
    <div class="product">...</div>
    <div class="product">...</div>
    <div class="product">...</div>
    <div class="product">...</div>
  </li>
  <li>
    <div class="product">...</div>
    <div class="product">...</div>
  </li>
</ul>

In the example I've given 6 products because it must close the wrapping if those are the last elements anyway.

Can you please show me how this can be done with jquery ?

Answer 1

You can use for loop along to iterate over every 4th element and then wrap the 3 previous elements along with current 4n element using .wrapAll() :

var productdivs = $("ul .product");
for(var i = 0; i < productdivs.length; i+=4) {
  productdivs.slice(i, i+4).wrapAll("<li></li>");
}

Working Demo