How to Wrap 3 divs in new div using JQuery

Question

I need to wrap every 3 Divs in a new Div.

I tried some codes, but anyone works like I want.

I have this html:

<div class="item active">
  <div class="row">
    <!-- ELEMENT 1 -->
    <div class="col-xs-12 col-sm-4 col-md-4 gp_products_item product-yarn">
      <div class="gp_products_inner">
        <div class="gp_products_item_image">
          <a href="#">
<img src="MODAL/images/gp_product_001.png" alt="gp product 001" />
</a>
        </div>
        <div class="gp_products_item_caption">
          <ul class="gp_products_caption_name">
            <li><a href="#">Lorem ipsum dolor</a></li>
            <li><a href="#">sz_themes</a></li>
          </ul>
          <ul class="gp_products_caption_rating">
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star-half-o"></i></li>
            <li class="pull-right"><a href="#">free</a></li>
          </ul>
        </div>
      </div>
    </div>
    <!-- ELEMENT 2 -->
    <div class="col-xs-12 col-sm-4 col-md-4 gp_products_item product-yarn">
      <div class="gp_products_inner">
        <div class="gp_products_item_image">
          <a href="#">
<img src="MODAL/images/gp_product_002.png" alt="gp product 002" />
</a>
        </div>
        <div class="gp_products_item_caption">
          <ul class="gp_products_caption_name">
            <li><a href="#">Lorem ipsum dolor</a></li>
            <li><a href="#">sz_themes</a></li>
          </ul>
          <ul class="gp_products_caption_rating">
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star-half-o"></i></li>
            <li class="pull-right"><a href="#">free</a></li>
          </ul>
        </div>
      </div>
    </div>
    <!-- ELEMENT 3 -->
    <div class="col-xs-12 col-sm-4 col-md-4 gp_products_item product-yarn">
      <div class="gp_products_inner">
        <div class="gp_products_item_image">
          <a href="#">
<img src="MODAL/images/gp_product_003.png" alt="gp product 003" />
</a>
        </div>
        <div class="gp_products_item_caption">
          <ul class="gp_products_caption_name">
            <li><a href="#">Lorem ipsum dolor</a></li>
            <li><a href="#">sz_themes</a></li>
          </ul>
          <ul class="gp_products_caption_rating">
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star-half-o"></i></li>
            <li class="pull-right"><a href="#">free</a></li>
          </ul>
        </div>
      </div>
    </div>
    <!-- ELEMENT 4 -->
    <div class="col-xs-12 col-sm-4 col-md-4 gp_products_item product-yarn">
      <div class="gp_products_inner">
        <div class="gp_products_item_image">
          <a href="#">
<img src="MODAL/images/gp_product_003.png" alt="gp product 003" />
</a>
        </div>
        <div class="gp_products_item_caption">
          <ul class="gp_products_caption_name">
            <li><a href="#">Lorem ipsum dolor</a></li>
            <li><a href="#">sz_themes</a></li>
          </ul>
          <ul class="gp_products_caption_rating">
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star-half-o"></i></li>
            <li class="pull-right"><a href="#">free</a></li>
          </ul>
        </div>
      </div>
    </div>
    <!-- ELEMENT 5 -->
    <div class="col-xs-12 col-sm-4 col-md-4 gp_products_item product-yarn">
      <div class="gp_products_inner">
        <div class="gp_products_item_image">
          <a href="#">
<img src="MODAL/images/gp_product_003.png" alt="gp product 003" />
</a>
        </div>
        <div class="gp_products_item_caption">
          <ul class="gp_products_caption_name">
            <li><a href="#">Lorem ipsum dolor</a></li>
            <li><a href="#">sz_themes</a></li>
          </ul>
          <ul class="gp_products_caption_rating">
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star-half-o"></i></li>
            <li class="pull-right"><a href="#">free</a></li>
          </ul>
        </div>
      </div>
    </div>
    <!-- ELEMENT 6 -->
    <div class="col-xs-12 col-sm-4 col-md-4 gp_products_item product-yarn">
      <div class="gp_products_inner">
        <div class="gp_products_item_image">
          <a href="#">
<img src="MODAL/images/gp_product_003.png" alt="gp product 003" />
</a>
        </div>
        <div class="gp_products_item_caption">
          <ul class="gp_products_caption_name">
            <li><a href="#">Lorem ipsum dolor</a></li>
            <li><a href="#">sz_themes</a></li>
          </ul>
          <ul class="gp_products_caption_rating">
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star-half-o"></i></li>
            <li class="pull-right"><a href="#">free</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

and I want every 3 elements, add the next code:

<div class="item">
  <div class="row">
    <!-- ELEMENT 4 -->
    <!-- ELEMENT 5 -->
    <!-- ELEMENT 6 -->
  </div>
</div>

The final result should be:

<div class="item">
  <div class="row">
    <!-- ELEMENT 1 -->
    <!-- ELEMENT 2 -->
    <!-- ELEMENT 3 -->
  </div>
</div>
<div class="item">
  <div class="row">
    <!-- ELEMENT 4 -->
    <!-- ELEMENT 5 -->
    <!-- ELEMENT 6 -->
  </div>
</div>

How I can do that?

Possible duplicate of [Wrap every 3 divs in a div](https://stackoverflow.com/questions/3366529/wrap-every-3-divs-in-a-div) — Justinas, Jan 25 '19 at 14:57
j08691, user Justinas posted code I used. Here I attach again: var divs = $("div > div"); for(var i = 0; i < divs.length; i+=3) { divs.slice(i, i+3).wrapAll("
"); } — Breiten, Jan 25 '19 at 14:59
Welcome to stackoverflow. Have a look at this article on how to create a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). — jtate, Jan 25 '19 at 15:06
Can you please add the **exact** code that you tried to the question itself (use the edit link)? Also, you cannot just copy paste an answer in SO and expect it to work when your HTML is different. You need to adapt the selectors, the div code that you insert, and at the end, try to explain with precision what doesn't work ("works like I want" is not enough). Good luck! — Kaddath, Jan 25 '19 at 15:26
[Code I used and don't makes I want](http://jsfiddle.net/nick_craver/vmdaM/).That div have not a class like I have on my code. — Breiten, Jan 25 '19 at 15:32
Hey Breiten - just following up. Was your question answered satisfactorily? If there is more we can help with, please add a comment below an answer, or edit your question to ask for more help. Otherwise, it would be great if you could choose a "best answer" (click the checkmark beside the answer) to close out the question - *it costs you nothing but helps the other guy.* If no answer was helpful, please post your own and select it with the checkmark to close out the question. *Thanks!* — cssyphus, Mar 10 '19 at 15:10

score 1 · Answer 1 · 2019-01-25T17:03:31.233

This can be achieved with the wrapAll function in Query. Each of your sections will need a new class, so I chose a, b, c, etc.

Here is the code:

$(document).ready(function() {
  $('.a,.b,.c').wrapAll('<div class="row"></div>');
  $('.d,.e,.f').wrapAll('<div class="row"></div>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item active">
  <div class="row">







    <!-- ELEMENT 1 -->

    <div class="col-xs-12 col-sm-4 col-md-4 gp_products_item product-yarn a">
      <div class="gp_products_inner">
        <div class="gp_products_item_image">
          <a href="#">
            <img src="MODAL/images/gp_product_001.png" alt="gp product 001" />
          </a>
        </div>
        <div class="gp_products_item_caption">
          <ul class="gp_products_caption_name">
            <li><a href="#">Lorem ipsum dolor</a></li>
            <li><a href="#">sz_themes</a></li>
          </ul>
          <ul class="gp_products_caption_rating">
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star-half-o"></i></li>
            <li class="pull-right"><a href="#">free</a></li>
          </ul>
        </div>
      </div>
    </div>



    <!-- ELEMENT 2 -->
    <div class="col-xs-12 col-sm-4 col-md-4 gp_products_item product-yarn b">
      <div class="gp_products_inner">
        <div class="gp_products_item_image">
          <a href="#">
            <img src="MODAL/images/gp_product_002.png" alt="gp product 002" />
          </a>
        </div>
        <div class="gp_products_item_caption">
          <ul class="gp_products_caption_name">
            <li><a href="#">Lorem ipsum dolor</a></li>
            <li><a href="#">sz_themes</a></li>
          </ul>
          <ul class="gp_products_caption_rating">
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star-half-o"></i></li>
            <li class="pull-right"><a href="#">free</a></li>
          </ul>
        </div>
      </div>
    </div>



    <!-- ELEMENT 3 -->
    <div class="col-xs-12 col-sm-4 col-md-4 gp_products_item product-yarn c">
      <div class="gp_products_inner">
        <div class="gp_products_item_image">
          <a href="#">
            <img src="MODAL/images/gp_product_003.png" alt="gp product 003" />
          </a>
        </div>
        <div class="gp_products_item_caption">
          <ul class="gp_products_caption_name">
            <li><a href="#">Lorem ipsum dolor</a></li>
            <li><a href="#">sz_themes</a></li>
          </ul>
          <ul class="gp_products_caption_rating">
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star-half-o"></i></li>
            <li class="pull-right"><a href="#">free</a></li>
          </ul>
        </div>
      </div>
    </div>



    <!-- ELEMENT 4 -->
    <div class="col-xs-12 col-sm-4 col-md-4 gp_products_item product-yarn d">
      <div class="gp_products_inner">
        <div class="gp_products_item_image">
          <a href="#">
            <img src="MODAL/images/gp_product_003.png" alt="gp product 003" />
          </a>
        </div>
        <div class="gp_products_item_caption">
          <ul class="gp_products_caption_name">
            <li><a href="#">Lorem ipsum dolor</a></li>
            <li><a href="#">sz_themes</a></li>
          </ul>
          <ul class="gp_products_caption_rating">
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star-half-o"></i></li>
            <li class="pull-right"><a href="#">free</a></li>
          </ul>
        </div>
      </div>
    </div>




    <!-- ELEMENT 5 -->
    <div class="col-xs-12 col-sm-4 col-md-4 gp_products_item product-yarn e">
      <div class="gp_products_inner">
        <div class="gp_products_item_image">
          <a href="#">
            <img src="MODAL/images/gp_product_003.png" alt="gp product 003" />
          </a>
        </div>
        <div class="gp_products_item_caption">
          <ul class="gp_products_caption_name">
            <li><a href="#">Lorem ipsum dolor</a></li>
            <li><a href="#">sz_themes</a></li>
          </ul>
          <ul class="gp_products_caption_rating">
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star-half-o"></i></li>
            <li class="pull-right"><a href="#">free</a></li>
          </ul>
        </div>
      </div>
    </div>





    <!-- ELEMENT 6 -->
    <div class="col-xs-12 col-sm-4 col-md-4 gp_products_item product-yarn f">
      <div class="gp_products_inner">
        <div class="gp_products_item_image">
          <a href="#">
            <img src="MODAL/images/gp_product_003.png" alt="gp product 003" />
          </a>
        </div>
        <div class="gp_products_item_caption">
          <ul class="gp_products_caption_name">
            <li><a href="#">Lorem ipsum dolor</a></li>
            <li><a href="#">sz_themes</a></li>
          </ul>
          <ul class="gp_products_caption_rating">
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star-half-o"></i></li>
            <li class="pull-right"><a href="#">free</a></li>
          </ul>
        </div>
      </div>
    </div>











  </div>
</div>

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

Here is a working example of how to do this. Since it's a little convoluted, I created a second example and embedded the keyword debugger, so that if you have DevTools (F12) open, you can step through the second example and watch the code work.

Basically, you count the number of child items and create an outer (main) loop for that many reps (to move each child item, one at a time).

Inside the main loop, create a second (inner) loop that counts to three.

Each time through that inner loop, you move the next child item into the new sub-group

Each first time through the inner loop, you create a new sub-group.

Each third time through the inner loop, you:
(a) reset the inner counter back to 0,
(b) drop the current sub-group into a holding div

When finished all items (the entire main loop), schlep the holding div into the top-most .row div, overwriting what used to be there originally (via the .html() method)

$('#mybutt').click(function(){
  var $new = $('<div id="grp">');
  var $top = $('.item > .row');
  var itemlen = $top.find('.gp_products_item').length;
  
  var grpcnt = 1;
  var maxcnt = 0;
  for (let i = 1; i <= itemlen; i++){
    maxcnt++;
    if(maxcnt===1){
      var $newgrp = $('<div id="grp_' +grpcnt+ '">');
      grpcnt++;
    }
    let tmp = $top.find('.gp_products_item:nth-child(1)');
    $newgrp.append(tmp);
    if (maxcnt > 2){
      maxcnt = 0;
      $new.append($newgrp);
    }
  }
  $top.html($new);
});

#demo_wrap{display:flex;}

#grp_1{padding:5px;color:orange;background:palegoldenrod;}
#grp_2{padding:5px;color:green;background:lightblue;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<button id='mybutt'>Click Me</button>
<div class="item">
    <div class="row">
         <div class="gp_products_item">
            <div class="inner stuff">Inner stuff 01</div>
        </div>
         <div class="gp_products_item">
            <div class="inner stuff">Inner stuff 02</div>
        </div>
         <div class="gp_products_item">
            <div class="inner stuff">Inner stuff 03</div>
         </div>
         <div class="gp_products_item">
            <div class="inner stuff">Inner stuff 04</div>
        </div>
         <div class="gp_products_item">
            <div class="inner stuff">Inner stuff 05</div>
        </div>
         <div class="gp_products_item">
            <div class="inner stuff">Inner stuff 06</div>
        </div>
    </div>
</div>

Second Version - with DevTools step-through

/*
  This version allows you to step-through the code in DevTools and watch how it works
*/
$('#mybutt').click(function(){
  var $new = $('<div id="grp">');
  var $top = $('.item > .row');
  var itemlen = $top.find('.gp_products_item').length;
  debugger;
  var grpcnt = 1;
  var maxcnt = 0;
  for (let i = 1; i <= itemlen; i++){
    maxcnt++;
    if(maxcnt===1){
      var $newgrp = $('<div id="grp_' +grpcnt+ '">');
      grpcnt++;
    }
    let tmp = $top.find('.gp_products_item:nth-child(1)');
    $newgrp.append(tmp);
    if (maxcnt > 2){
      maxcnt = 0;
      $('#RDiv').append($newgrp);
    }
  }
});

#demo_wrap{display:flex;}
#LDiv, #RDiv{flex:1;padding:5px;}
#LDiv{background:palegreen;}
#RDiv{background:lightpink;}

#grp_1{background:palegoldenrod;}
#grp_2{background:lightblue;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<button id='mybutt'>Press F12 then Click Me</button>
<div id="demo_wrap">
<div id="LDiv">
<div class="item">
    <div class="row">
         <div class="gp_products_item">
            <div class="inner stuff">Inner stuff 01</div>
        </div>
         <div class="gp_products_item">
            <div class="inner stuff">Inner stuff 02</div>
        </div>
         <div class="gp_products_item">
            <div class="inner stuff">Inner stuff 03</div>
         </div>
         <div class="gp_products_item">
            <div class="inner stuff">Inner stuff 04</div>
        </div>
         <div class="gp_products_item">
            <div class="inner stuff">Inner stuff 05</div>
        </div>
         <div class="gp_products_item">
            <div class="inner stuff">Inner stuff 06</div>
        </div>
    </div>
</div>
</div><!-- #LDiv -->
<div id="RDiv"></div>
</div><!-- #demo_wrap -->

How to Wrap 3 divs in new div using JQuery

2 Answers2

Second Version - with DevTools step-through