Question

解释我的问题有点难，所以如果我不清楚自己，那就问问吧。

使用此脚本我随机加载6个div。

<script> 
$(document).ready(function(){
var divs = $("div.item").get().sort(function(){ 
return Math.round(Math.random())-0.5;
}).slice(0,6)
$(divs).show();
});
</script>

我正在使用twitter-bootstrap，因为我想要每行3个div（两行），我已经为它们分配了.span4类。这将自动生成两行，每行3 .span4。它们需要与左右边缘对齐，并且在每个边缘之间留下沟槽。
的 SEE HERE

现在的问题是，通过随机加载它们，我无法让它们正确对齐使用twitter-bootstrap，第一个跨度永远不会得到margin-left，而其他所有内容都会出现。
所以如果我随机加载，例如：
第六个跨度进入第一个位置，第一个跨度进入第二个位置，然后我有一个对齐（边距）问题。
SEE HERE

我认为首先我需要通过使用.span4 { margin-left: 0 !important;}来使所有跨度相等，这可以很好地将两行整齐地与3 .span4相邻，但后来我没有排水沟它们也不是左右对齐的 SEE HERE

我现在几天都在为这种情况苦苦挣扎，想不出任何优雅的解决方案。

是否有Javascript解决方案可以根据加载的顺序为特定跨度添加样式？
第一个和第五个加载的只有一个右边距
加载第二和第五的那些具有左右边距加载为第三和第六的那些只有左边距

Answer 1

<script> 
$(document).ready(function(){
var divs = $("div.item").get().sort(function(){ 
return Math.round(Math.random())-0.5;
}).slice(0,6)

$(divs).each(function( index ) {
  if(index==0 || index==3)
      $(this).css("margin-left", "0px");
  else
      $(this).css("margin-left", "10px"); //or whatever left value you need
});

$(divs).show();
});
</script>

这应该可以工作但是如果div是一种奇怪的数组，那么你不可能将代码改为此。

<script> 
$(document).ready(function(){
var divs = $("div.item").get().sort(function(){ 
return Math.round(Math.random())-0.5;
}).slice(0,6)

var i=0;
for(i=0; i<6; i++){
  if(i==0 || i==3)
      $(divs[i]).css("margin-left", "0px");
  else
      $(divs[i]).css("margin-left", "10px"); //or whatever left value you need
}

$(divs).show();
});
</script>

Answer 2

感谢Alex，我能够简化问题和问题，所以现在你有两个非常好的答案>> HERE <<了。谢谢大家的贡献!!

添加样式到随机加载的div

2 个答案: