将样式添加到随机加载的div [英] Add style to random loaded divs

问题描述

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

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

 <脚本> 
 $（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 。他们需要与左右边距对齐，并且在每个边缘之间留下一个沟槽。

浏览

现在的问题是，通过随机加载它们，我无法让它们正确对齐。

通过twitter-bootstrap，第一个跨度永远不会获得 margin-left ，而其余的都是。所以，如果我随机加载，例如：
第六个跨度到第一个位置，首先跨到第二个位置，然后我有一个对齐（边缘）问题。
SEE HERE

我认为首先需要使用 .span4 {margin-left： 0！important;} 这可以很好地将两行整齐排列在3 .span4 旁边，但是我没有水沟也不是左右对齐
在这里看

我有现在一直在这种情况下挣扎几天，想不到任何优雅的解决方案。

有没有一种Javascript解决方案可以将样式添加到特定跨度，具体取决于它们以何种顺序加载？

加载第一个和第五个只有右边距

加载第二个和第五个有左右边距

加载为第三和第六只有一个左边距

解决方案

 < script> ; 
 $（document）.ready（function（）{
 var divs = $（div.item）。get（）。sort（function（）{
 return Math.round Math.random（）） -  0.5; 
}）。slice（0,6）
 $ b $（divs）.each（function（index）{
 if（index = = 0 || index == 3）
 $（this）.css（margin-left，0px）; 
 else 
 $（this）.css（margin- ）; 
 $ b $（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）; //或任何你需要的剩余值
} 
 
 $（divs）。 show（）; 
}）; 
< / script> 
  

It is a bit hard to explain my problem, so if I am not making my self clear, just ask.

With this script I randomly load 6 divs.

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

I am using twitter-bootstrap, and as I want 3 divs per row (two rows) I have assigned them with .span4 class. This will I automatically generate two rows with 3 .span4 on each. They need to align to both left- and right margin and also leave a gutter between each-one.
SEE HERE

Now the problem is that by randomly loading them, I can not get them to align properly.
With twitter-bootstrap, the first span never gets margin-left whereas all the rest do.
So if I randomly load, for example:
The sixth span into the fist position and the first span into second position, then I have a alignment (margin) problem.
SEE HERE

I figured that first I need to make all spans equal by using .span4 { margin-left: 0 !important;} this works fine to have the two rows neatly with the 3 .span4 next to each-other, but then I have no gutter nor are they aligned both left and right
SEE HERE

I have now been struggling with this situation a few days and cannot think of any elegant solution.

Is there a Javascript solution to add style to specific spans depending in what order they are loaded?
The ones that load as first and fifth to have only a right margin
The ones loading second and fifth to have a left- and right margin
The ones loading as third and sixth to have only a left-margin

解决方案

<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>

This should work but if divs is a weird sort of array and by chance it does not you can change the code to this.

<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>

这篇关于将样式添加到随机加载的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！