将另一个不同的 class 添加到一组相似的 class

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>

我知道 here 中描述的使用 jquery 的直接 CSS 编辑技术。但是在这里，我想附加类已经有我想要的样式。

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];
   });
});

将另一个不同的 class 添加到一组相似的 class

Append another different classes to a set of similar class

css

wordpress

jquery