Add closing and opening div tags every X amount of divs inside another div

USING THIS

var groups = {};
$(".product-list .product-list_item").each(function(i) {
    var c = $(this).attr("class");
    if(!groups[c]) groups[c] = [];
    groups[c].push(this);         
});      
for(var i in groups) {      
    $(groups[i]).wrapAll('<div class="product-list_row" />').each(function(i){
        if (((i+1) % 3) == 0)
            $(this).after('</div><div class="product-list_row">');
        });
    }

GOAL - I'd like to get this:

<div class="product-list">
    <div class="product-list_item jackson">x</div>
    <div class="product-list_item jackson">x</div>
    <div class="product-list_item jackson">x</div>
    <div class="product-list_item jackson">x</div>
    <div class="product-list_item mason">x</div>
    <div class="product-list_item mason">x</div>
    <div class="product-list_item mason">x</div>
</div>
<div class="whatever">
    <p>hello i'm a different div</p>
</div>
<div class="product-list">
    <div class="product-list_item taylor">x</div>
    <div class="product-list_item taylor">x</div>
    <div class="product-list_item pencil">x</div>
    <div class="product-list_item pencil">x</div>
    <div class="product-list_item pencil">x</div>
</div>

To look like this:

<div class="product-list">
  <div class="product-list_row">  
    <div class="product-list_item jackson">x</div>
    <div class="product-list_item jackson">x</div>
    <div class="product-list_item jackson">x</div>
  </div>
  <div class="product-list_row"> 
    <div class="product-list_item jackson">x</div>
  </div>
  <div class="product-list_row"> 
    <div class="product-list_item mason">x</div>
    <div class="product-list_item mason">x</div>
    <div class="product-list_item mason">x</div>
  </div>
</div>
<div class="whatever">
  <p>hello i'm a different div</p>
</div>
<div class="product-list">
  <div class="product-list_row"> 
    <div class="product-list_item taylor">x</div>
    <div class="product-list_item taylor">x</div>
  </div>
  <div class="product-list_row"> 
    <div class="product-list_item pencil">x</div>
    <div class="product-list_item pencil">x</div>
    <div class="product-list_item pencil">x</div>
  </div>
</div>

QUESTION - How can I get jQuery to insert a closing tag and opening tag for .product-list_row like </div><div class="product-list_row"> without it ignoring the closing tag, and then adding a closing tag to that same new opening tag. If you look at the splitting up of the "jackson" class group directly above, that's how I'm trying to get it.

It will correctly wrap the grouped divs with the same class name, with the dynamically created product-list_row div. And then within that group, it correctly finds and inserts new html after X number of divs, but it's just not formatting it correctly to my needs since jQuery is auto closing and removing my closing tag.

HERE'S MY FIDDLE I found a few suggestions on here that lead me to the code I'm messing with , and I made a fiddle of it here: http://jsfiddle.net/jonnyplow/Lqj73ewv/

Any ideas?

Answers 1

  • I won't use jQuery to change html tag structure.

    Maybe you can change your for loop like this.

    var groups = {};
    $(".product-list .product-list_item").each(function(i) {
      var c = $(this).attr("class");
      if (!groups[c]) groups[c] = [];
      groups[c].push(this);
    });
    
    /*
    for (var i in groups) {
      //$(groups[i]).wrapAll('<div class="product-list_row" />');
      $(groups[i]).wrapAll('<div class="product-list_row" />').each(function(i) {
        if (((i + 1) % 3) == 0)
          $(this).after('</div><div class="product-list_row">');
      });
    }*/
    
    for (var i in groups) {
      var group = groups[i];
      var count=0;
      var rowEles=[];
      for(var j=0;j<group.length;j++){
        rowEles.push(group[j]);
        count++;
        if(rowEles.length==3||count==group.length){
          $(rowEles).wrapAll('<div class="product-list_row" />');
          rowEles=[];
        }
      }
    }
    body {
      padding: 20px;
    }
    
    .product-list {
      margin-bottom: 10px;
      padding: 5px;
      border: 1px solid red;
    }
    
    .product-list_row {
      border: 1px solid #bbb;
      padding: 5px;
      margin-bottom: 10px;
    }
    
    .whatever {
      margin-bottom: 10px;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <div class="product-list">
    
      <div class="product-list_item jackson">x</div>
      <div class="product-list_item jackson">x</div>
      <div class="product-list_item jackson">x</div>
      <div class="product-list_item jackson">x</div>
      <div class="product-list_item mason">x</div>
      <div class="product-list_item mason">x</div>
      <div class="product-list_item mason">x</div>
    
    </div>
    <div class="whatever">
      hello i'm different
    </div>
    <div class="product-list">
    
      <div class="product-list_item taylor">x</div>
      <div class="product-list_item taylor">x</div>
      <div class="product-list_item pencil">x</div>
      <div class="product-list_item pencil">x</div>
      <div class="product-list_item pencil">x</div>
    
    </div>


Related Articles