Add css classes in sequence to div element

Question

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?

Are you averse to just using CSS's nth child and not worrying about different classes to style them? If not I will write something up for you. — haltersweb
– haltersweb, Commented Feb 26, 2017 at 2:46

Zach Ross-Clyne · Accepted Answer · 2015-06-26 15:59:40Z

2

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/

edited Jun 26, 2015 at 15:59

answered Jun 26, 2015 at 15:45

Zach Ross-Clyne

7993 gold badges11 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Keerthi · Accepted Answer · 2015-06-26 16:03:45Z

0

$(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>

edited Jun 26, 2015 at 16:03

answered Jun 26, 2015 at 15:49

Keerthi

9236 silver badges22 bronze badges

6 Comments

Zach Ross-Clyne Over a year ago

They said they had 15 elements coming from the database so this wouldn't work

Keerthi Over a year ago

Just change the for loop value based on number of elements. I have added the answer for 7 elements. Change i<=15 in for loop

Zach Ross-Clyne Over a year ago

Or do what I have suggested with a jQuery .each block to loop through each and determine the class based on the mod of the index plus 1.

Keerthi Over a year ago

Each one has a different approach

Zach Ross-Clyne Over a year ago

And its a variable amount coming from the database. You shouldn't hard code a length like this.

|

Collectives™ on Stack Overflow

Add css classes in sequence to div element

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related