將樣式陣列中的一個應用到每個選定的項目

-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

將樣式陣列中的一個應用到每個選定的項目

回答

相關問題