Добавить еще один класс в набор аналогичного класса

Question

Я хочу добавить различные классы в набор повторяющихся элементов.

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

Я хочу стилизовать вышеуказанные элементы div, добавив к ним различные классы стилей.

Он должен стать как этот

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

Я знаю, прямой метод редактирования CSS с помощью JQuery, описанной here. Но здесь я хочу добавить классы, у которых уже есть стили, которые я хочу.

Answer 1

Вы можете использовать:

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

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

Working Demo

Answer 2

Вы можете использовать так:

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