Append another different classes to a set of similar class

Question

I want to append different classes to a set of repeating elements.

<div class="widget"></div>
<div class="widget"></div>
<div class="widget"></div>
<div class="widget"></div>

I want to style the above div elements by appending different style classes to them.

It should become like this

<div class="widget fg-white"></div>
<div class="widget fg-black"></div>
<div class="widget fg-red"></div>
<div class="widget fg-green"></div>

I know the direct CSS editing technique using jquery that is described here . But here, I want to append classes which already have the styles that I want.

your post is not very clear, can you provide a better explanation or a jsfiddle? — Scriptable, Jan 16 '15 at 15:57
What if there is more than 4 elements? Have you made any attempts to achieve this yourself? — Rory McCrossan, Jan 16 '15 at 15:57

score 3 · Accepted Answer · answered Jan 16 '15 at 15:58

3

You can use:

var colors = ["white", "black", "red", "green"];

$('.widget').each(function(i) {
  $(this).addClass("fg-"+colors[i % colors.length]);
});

Working Demo

answered Jan 16 '15 at 15:58

Milind Anantwar

81,290
25
94
125

score 1 · Answer 2 · answered Jan 16 '15 at 16:00

1

You may use like this:

var klasses = ['fg-white','fg-black','fg-red','fg-green'];
$('.widget').each(function(){
   return $(this).addClass(function(i){
      return klasses[i];
   });
});

answered Jan 16 '15 at 16:00

Bhojendra Rauniyar

83,432
35
168
231

Append another different classes to a set of similar class

2 Answers2