这是这篇文章的继续提问：
Add style to random loaded divs我现在已尝试尽可能简化此问题。
开始：
使用此代码，我试图根据加载的顺序为随机加载的项目添加样式。
<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==1 || index==3)
$(this).css("margin-left", "0%");
else
$(this).css("margin-left", "2%"); //or whatever left value you need
});
$(divs).show();
});
</script>
我需要
.item栏排成一排，如图所示到目前为止，每次刷新浏览器的次数都是偶然的。
我想如果您自己尝试，就会发现问题所在
这是整个shebang的快速复制/粘贴
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<style>
.container {width:750px; background-color:#CCC; height:200px; padding-top:70px; margin: 0 auto; margin-top:5%}
.item {display:none; text-align:center; width:32%; float:left}
</style>
<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==1 || index==3)
$(this).css("margin-left", "0%");
else
$(this).css("margin-left", "2%"); //or whatever left value you need
});
$(divs).show();
});
</script>
</head>
<body>
<div class="container">
<div class="item" style="background-color:#F00">1</div>
<div class="item" style="background-color:#9F0">2</div>
<div class="item" style="background-color:#FF0">3</div>
<div class="item" style="background-color:#939">4</div>
<div class="item" style="background-color:#3CF">5</div>
<div class="item" style="background-color:#CF3">6</div>
<div class="item" style="background-color:#6C9">7</div>
<div class="item" style="background-color:#999">8</div>
<div class="item" style="background-color:#90F">9</div>
<div class="item" style="background-color:#FF9">10</div>
<div class="item" style="background-color:#099">11</div>
<div class="item" style="background-color:#666">12</div>
</div>
</body>
</html>
最佳答案
这是因为要循环的div并不总是与标记中div的顺序匹配，这意味着您将应用错误的边距。请尝试以下代码：
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<style>
.container {width:750px; background-color:#CCC; height:200px; padding-top:70px; margin: 0 auto; margin-top:5%}
.item {display:none; text-align:center; width:32%; float:left}
</style>
<script>
$(document).ready(function(){
var $container = $('div.container'),
divs = $("div.item").get().sort(function(){
return Math.round(Math.random())-0.5;
}).slice(0,6),
<!-- Make a clone, leaving original pot untouched -->
$clonedDivs = $(divs).clone();
<!-- Clear container -->
$container.html('');
<!-- Append new divs to container -->
$clonedDivs.each(function( index ) {
$container.append(this);
if (index % 3 == 0) {
$(this).css("margin-left", "0%");
} else {
$(this).css("margin-left", "2%"); //or whatever left value you need
}
});
$clonedDivs.show();
});
</script>
</head>
<body>
<div class="pot">
<div class="item" style="background-color:#F00">1</div>
<div class="item" style="background-color:#9F0">2</div>
<div class="item" style="background-color:#FF0">3</div>
<div class="item" style="background-color:#939">4</div>
<div class="item" style="background-color:#3CF">5</div>
<div class="item" style="background-color:#CF3">6</div>
<div class="item" style="background-color:#6C9">7</div>
<div class="item" style="background-color:#999">8</div>
<div class="item" style="background-color:#90F">9</div>
<div class="item" style="background-color:#FF9">10</div>
<div class="item" style="background-color:#099">11</div>
<div class="item" style="background-color:#666">12</div>
</div>
<div class="container">
</div>
</body>
</html>