CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Kamlesh Panchal
Kamlesh Panchal

Reputation: 192

Add css classes in sequence to div element

I have a div with dynamic content coming from database. This div is repeat region showing about 15 records from database. This div is having a class "cslide" already assigned.

Now, I have 7 css classes namely colour1, colour2, colour3... colour7. I want to apply this classes one by one to the repeated divs in sequence like: first div will have colour1, second div will have colour2 and so on.

Can this be done using jQuery or Javascript?

Upvotes: 0

Views: 377

Answers (2)

Keerthi
Keerthi

Reputation: 923

$(document).ready(function(){
    color = 0;
    for(i=0;i<=15;i++){
         if(color < 7){
    color++;
    }else{
    color = 1;
    }
    $('.cslide:eq('+i+')').addClass('color'+color);
    }

});
.color1{
    color:red
}
.color2{
    color:green
}
.color3{
    color:blue
}
.color4{
    color:yellow
}
.color5{
    color:orange
}
.color6{
    color:aqua
}
.color7{
    color:violet
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cslide"> Text1 </div>
<div class="cslide"> Text2 </div>
<div class="cslide"> Text3 </div>
<div class="cslide"> Text4 </div>
<div class="cslide"> Text5 </div>
<div class="cslide"> Text6 </div>
<div class="cslide"> Text7 </div>
<div class="cslide"> Text1 </div>
<div class="cslide"> Text2 </div>
<div class="cslide"> Text3 </div>
<div class="cslide"> Text4 </div>
<div class="cslide"> Text5 </div>
<div class="cslide"> Text6 </div>
<div class="cslide"> Text7 </div>
<div class="cslide"> Text8 </div>

Upvotes: 0

Zach Ross-Clyne
Zach Ross-Clyne

Reputation: 799

Assuming that you're repeating the classes, then yes do it in jQuery like this

    $('.cslide').each(function(index, element)
    {
        var i = (index % 7) + 1; // 7 is the number of classes
        $(this).addClass('colour'+i);
    });

If this doesn't work straight in the <script>...</script> block, surround it in

$(document).ready(function() { ... });

An example of this using 5 classes and 15 objects can be seen here

https://jsfiddle.net/c5v6z8yt/

Upvotes: 2

Related Questions