将另一个不同的类附加到一组类似的类

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>

我知道使用jquery的直接CSS编辑技术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];
   });
});