将样式阵列中的一个应用到每个选定的项目

-1

我有3个（此刻，可能更多是未来）样式，我想按照旋转顺序添加到一组div中。将样式阵列中的一个应用到每个选定的项目

我要分配的类别是：的.blue，.red，。绿色

，我有4个格，我想他们在旋转的顺序分配到：

<div class="tripItem"> 
    ... 
</div> 
<div class="tripItem"> 
    ... 
</div> 
<div class="tripItem"> 
    ... 
</div> 
<div class="tripItem"> 
    ... 
</div>

我会最终结果如下：

<div class="tripItem blue"> 
    ... 
</div> 
<div class="tripItem red"> 
    ... 
</div> 
<div class="tripItem green"> 
    ... 
</div> 
<div class="tripItem blue"> 
    ... 
</div>

并继续按相同的顺序旋转，如果我要添加更多的div。

这是什么最好的方法呢？

来源

2012-08-02 Fraser

作为一个侧面说明：不要用表象的命名约定CSS类。使用结构化命名约定。今天的蓝色可能不是明天的蓝色，但结构可能不会改变。推理和例子：http://sixrevisions.com/css/css-tips/css-tip-2-structural-naming-convention-in-css/ – Nope 2012-08-02 22:40:01

@Fraser：原因我很无聊我添加了性能测试的答案，除了kei之外，它仍然因为一个未定义的错误而崩溃。不知道为什么，看到它在他的小提琴中奏效。这些是结果：http://jsperf.com/apply-array-of-styles – Nope 2012-08-02 22:52:20

你可以传递一个回调addClass^[docs]：

var classes = ['blue', 'red', 'green'], 
    len = classes.length; 

$('div.tripItem').addClass(function(i) { 
    return classes[i%len]; 
});

的modulus operator是你的朋友，如果你想通过列表来转动。

来源

2012-08-02 22:38:36

+1你比我好:-( – wanovak 2012-08-02 22:39:14

var num = 0; 
var colors = ['blue','red','green']; 
$('.tripItem').each(function(){ 
    if(num >= colors.length) return false; 
    $(this).addClass(colors[num]); 
    num++; 
});

来源

2012-08-02 22:37:58 wanovak

是的，我注意到了。关于添加代码以确保不会发生，但Felix's更优雅。 – wanovak 2012-08-02 22:40:04

我+你在他的评论认识到它。 ;-P – AceCorban 2012-08-02 22:40:45

var colorArr = ['blue','red','green','yellow']; 
$("div.tripItem").each(function(i){ 
    $(this).addClass(colorArr[i]); 
});

DEMO

来源

2012-08-02 22:40:46 kei

将样式阵列中的一个应用到每个选定的项目

回答

相关问题