2

这是这篇文章中的一个持续问题： 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>
4

2 回答 2

2

因为您没有随机化 DOM order，所以只有要包含在divs数组中的 div 。顺序仍然是数字的。

因此，当循环divsusing时$.each(divs)，您正在循环您创建的随机顺序，但 DOM 顺序仍然保持不变（如果这有意义的话）。你可以这么说divs并且$('div.items')不同步。

你可以试试这个：（演示：http: //jsbin.com/aSejiWA/3）

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

    $(divs).addClass('show'); // to re-select the visual items

    $('.item.show').each(function( index ) {
      $(this).css('margin-left', index%3 ? '2%' : 0); 
    }).show();
});
于 2013-10-03T10:57:25.987 回答
1

这是因为您循环的 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>
于 2013-10-03T11:10:58.087 回答