Create new row every 4 "thumb divs"

Question

what im trying to achieve is to put every 4 divs inside new created row

Heres my html input

<div class="container">
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
</div>

and i want it to look like

<div class="container">
  
  <div class="row">
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
  </div>
  
  <div class="row">
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
  </div>
  
</div>

I started with

<script type="text/javascript">
var thumb = document.getElementsByClassName('thumb');
if (thumb.length < 4) {

}
</script>

but i have no idea how to go on from this point

If these div's are loaded dynamically using php then try the php way to solve it. — Vignesh Bala, Jul 01 '15 at 13:12

score 3 · Accepted Answer · edited May 23 '17 at 12:15

3

Try this one,

$(document).ready(function(){
    var divs = $(".container .thumb");
    for(var i = 0; i < divs.length; i+=4) {
        divs.slice(i, i+4).wrapAll("<div class='row'></div>");
    }
});

For more details refer this link

edited May 23 '17 at 12:15

Community

1
1

answered Jul 01 '15 at 13:17

Vignesh Bala

889
6
25

Any chance twose two divs could have separate clasess? – spleen Jul 01 '15 at 13:47
Yes change .thumb into div – Vignesh Bala Jul 02 '15 at 03:40

Create new row every 4 "thumb divs"

1 Answers1