Changing the class of divs in a pattern using jQuery

I have a blog layout I’m working on (bootstrap) and I’ve hit a snag.

I need the first two divs to be col-md-3 (NORMAL), then the following 2 divs col-md-6 (WIDE), then it needs to make the next 4 divs as col-md-3 (NORMAL), then the next 2 divs col-md-6(WIDE) and so on, so forth.

I’ve tried [this method in codepen][1], which works (code below) but is obviously not the most efficient way to do it – I’m fairly new to jQuery, so would appreciate any help you can offer!

HTML:

  <div class="container">
  <div class="row" id="blog">
    <div>Normal</div>
    <div class="">Normal</div>
    <div class="">Wide</div>
    <div class="">Wide</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Wide</div>
    <div class="">Wide</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Wide</div>
    <div class="">Wide</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Wide</div>
    <div class="">Wide</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Wide</div>
    <div class="">Wide</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Wide</div>
    <div class="">Wide</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
  </div>
</div>

jQuery used:

$("#blog div").each(function(i) {
var newClass = 'col-md-3 red';
if (i == 2) newClass = 'col-md-6 blue';
if (i == 3) newClass = 'col-md-6 blue';
if (i == 8) newClass = 'col-md-6 blue';
if (i == 9) newClass = 'col-md-6 blue';
if (i == 14) newClass = 'col-md-6 blue';
if (i == 15) newClass = 'col-md-6 blue';
if (i == 20) newClass = 'col-md-6 blue';
if (i == 21) newClass = 'col-md-6 blue';
if (i == 26) newClass = 'col-md-6 blue';
if (i == 27) newClass = 'col-md-6 blue';
if (i == 32) newClass = 'col-md-6 blue';
if (i == 33) newClass = 'col-md-6 blue';
$(this).addClass(newClass);
});

Answer

You can do it using .not() and .filter()

$('#blog div').addClass('col-md-3 red')         // add red class to all the divs
  .not(':lt(2)')                                // exclude the first two Normal elements
  .filter(function(i){                          // filter to get the Wide elements
    return (i % 6 == 0) || ( (i % 6) - 1 == 0)  // filter every 6 element and the element next of it
  }).addClass('col-md-6 blue');                 // add the class to the Wide elements

.red{
  background : red;
}
.blue{
  background : blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row" id="blog">
    <div>Normal</div>
    <div class="">Normal</div>
    <div class="">Wide</div>
    <div class="">Wide</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Wide</div>
    <div class="">Wide</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Wide</div>
    <div class="">Wide</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Wide</div>
    <div class="">Wide</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Wide</div>
    <div class="">Wide</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Wide</div>
    <div class="">Wide</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
  </div>
</div>

Advertisement

Answer