JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<div>
    <div class="foo">yah</div>
    <div class="foo">yah</div>
    <div class="foo">yah</div>
    <div class="foo">yah</div>
    <div class="foo">yah</div>
    <div class="blf">bl</div>
    <div class="foo">yah</div>
    <div class="foo">yah</div>
    <div class="foo">yah</div>
    <div class="foo">yah</div>
    <div class="foo">yah</div>
    <div class="foo">yah</div>
    <div class="foo">yah</div>
    <div class="foo">yah</div>
    <div class="foo">yah</div>
    <div class="foo">yah</div>
    <div class="foo">yah</div>
    <div class="foo">yah</div>
 </div>

CSS

div {
    float: left;
    clear: both;
    padding:10px;
}

JavaScript

$('.foo').each(function(i) {    
    if(!(($('.foo').index(this)-2) % 6)) {    
        $( this ).css( "background-color", "red" );
    }
    if(!(($('.foo').index(this)-3) % 6)) {    
        $( this ).css( "background-color", "violet" );
    }
    if(!(($('.foo').index(this)-4) % 6)) {    
        $( this ).css( "background-color", "orange" );
    }
});