javascript - 为随机加载的 div 添加样式

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，第一个 span 永远不会得到 margin-left 而所有其他 span 都会。
所以如果我随机加载，例如:
第六个 span 到第一个位置并且第一个跨度到第二个位置，然后我有对齐(边距)问题。
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>