使用 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);
  }
})​;