在jQuery的每個實例上添加隨機CSS

Question

我需要做的是在我的HTML中爲每個實例.project_content添加三種CSS樣式中的一種，並且樣式需要隨機挑選出來供每個實例使用。

的三種風格分別爲：
float:left
float:right OR
margin:auto + width:x（其中.project_content寬度計算x是計算的寬度）

現在我有這樣的：

<script type="text/javascript"> 
$(document).ready(function(){ 
    var floats   = ["right","left"];     
    var rand = Math.floor(Math.random()*floats.length);   
    $('.project_content').css("float", floats[rand]); 
});​​​​​​​​​​​​​ 
</script> 

所有此腳本爲我做的是應用float:left或float:right與.project_content的所有實例，而不是爲每個實例選擇正確或左側。

如何讓我的腳本爲每個project_content實例選擇一個隨機變量，以及如何將margin:auto +計算的width添加到組合中？非常感謝。

Answer 1

你需要得到一個隨機樣式集合中的每個元素，而不是對整個集一個隨機值。可以使用.css(propertyName, function(index, value))來完成，因爲該函數被調用爲每個匹配元素：

$('.project_content').css("float", function() { 
    var rand = Math.floor(Math.random() * floats.length); 
    return floats[rand]; 
})​; 

DEMO。

要添加margin和width混進去，就可以不再使用css()（因爲你需要修改多個屬性之一），但可以使用.each()做到這一點：

var styles = [ "left", "right", "margin" ]; 
$('.project_content').each(function() { 
    var randomStyle = styles[Math.floor(Math.random() * floats.length)]; 
    if (randomStyle == "left" || randomStyle == "right") { 
    $(this).css('float', randomStyle); 
    } else { // margin 
    $(this).css('margin', 'auto') 
      .css('width', your_calculated_width); 
    } 
})​;