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?

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?

• javascript
• jquery
• html
• css
• loops

Share Improve this question Follow edited Mar 10, 2015 at 11:52 tomrozb 26.3k3131 gold badges106106 silver badges126126 bronze badges asked Mar 10, 2015 at 10:48 XeenXeen 7,0131717 gold badges6969 silver badges113113 bronze badges 3

• Why would the menu have that structure in the first place? – Paulie_D Commented Mar 10, 2015 at 10:52
• 1 Have you tried anything? Which bit are you finding difficult? It's just: Get all product divs, loop them, add them to a <li> (which you add to the <ul>), and every 4 loops change to a new <li> – musefan Commented Mar 10, 2015 at 10:52
• Need to fix source. You have invalid markup. <div> is not a valid child of <ul> therefore you can't rely on all browsers to render them inside the <ul> – charlietfl Commented Mar 10, 2015 at 10:54

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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