很难解释我的问题,所以如果我没有说清楚,尽管问。
通过这个脚本,我随机加载了 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 解决方案可以根据加载顺序为特定跨度添加样式?
第一个和第五个加载的只有右边距
加载第二个和第五个的有左右边距
加载第三个和第六个只有左边距
最佳答案
<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>
关于javascript - 为随机加载的 div 添加样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19152522/