1

解释我的问题有点困难，所以如果我没有说清楚，请问。

使用此脚本，我随机加载 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类。这将自动生成两行，.span4每行 3。它们需要对齐左右边距，并在每个边距之间留出一个间距。
看这里

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

我想首先我需要通过使用它来使所有跨度相等，.span4 { margin-left: 0 !important;}这样可以很好地使两行整齐地与 3.span4相邻，但是我没有排水沟，它们也没有左右对齐，请
参见此处

我已经在这种情况下苦苦挣扎了几天，想不出任何优雅的解决方案。

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

4

2 回答 2

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>

这应该可以，但是如果 divs 是一种奇怪的数组，并且碰巧它不是，您可以将代码更改为此。

<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>
于 2013-10-03T07:49:01.023 回答
0

感谢亚历克斯，我能够简化问题和问题，所以现在你有两个很好的答案>>这里<<
感谢大家的贡献！

于 2013-10-03T14:17:15.003 回答