添加樣式隨機加載divs - 不能正常工作

這是這篇文章的繼續問題： Add style to random loaded divs我現在試圖儘可能簡化這個問題。添加樣式隨機加載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條排隊在這幅畫你刷新瀏覽器每隔多少時間 enter image description here 到目前爲止，這只是ocurs偶然。

我覺得如果你自己嘗試一下，你會看到這個問題這裏是一個快速的複製/粘貼整個事情

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

來源

2013-10-03 no0ne

這是怎麼回事？ – David

這是因爲你在循環的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-03 11:10:58

另外，是否有可能從外部html加載div.item的？ – no0ne

因爲你是不是隨機的DOM 順序，只有什麼divs包含在divs數組中。訂單仍然是數字。

因此，當使用$.each(divs)循環divs時，您正在循環所創建的隨機順序，但是DOM順序仍未觸及（如果有意義的話）。你可以說divs和$('div.items')不同步。

你可以試試這個：（DEMO：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-03 10:57:25 David

謝謝大衛！ – no0ne

添加樣式隨機加載divs - 不能正常工作

回答

相關問題