隨機div，只顯示其中的一部分

Question

我在我的網站上使用此代碼來隨機化div的順序。在我的一個子頁面中，我想用稍微修改的版本 - 將隨機顯示12個div，但只顯示前3個，剩下的將設置爲「display：none;」或使用js類似的效果。

任何建議如何修改下面的代碼，以便只有3個第一個div會出現？

下面是代碼：http://jsfiddle.net/ca7WW/

HTML：

<div class="randomize"> 
    <div class="random_div">1</div> 
    <div class="random_div">2</div> 
    <div class="random_div">3</div> 
    <div class="random_div">4</div> 
    <div class="random_div">5</div> 
    <div class="random_div">6</div> 
    <div class="random_div">7</div> 
    <div class="random_div">8</div> 
    <div class="random_div">9</div> 
    <div class="random_div">10</div> 
    <div class="random_div">11</div> 
    <div class="random_div">12</div> 
</div> 

的jQuery：

function shuffle(array) { 
    var currentIndex = array.length 
    , temporaryValue 
    , randomIndex 
    ; 

    // While there remain elements to shuffle... 
    while (0 !== currentIndex) { 

    // Pick a remaining element... 
    randomIndex = Math.floor(Math.random() * currentIndex); 
    currentIndex -= 1; 

    // And swap it with the current element. 
    temporaryValue = array[currentIndex]; 
    array[currentIndex] = array[randomIndex]; 
    array[randomIndex] = temporaryValue; 
    } 

    return array; 
} 

(function ($) { 
    $.fn.randomize = function (childElem) { 
     return this.each(function() { 
      var $this = $(this); 
      var elems = shuffle($(childElem)); 
      $this.remove(childElem); 
      for (var i = 0; i < elems.length; i++) 
      $this.append(elems[i]); 
     }); 
    } 
})(jQuery) 

jQuery(function($){ 
    $("div.randomize").randomize("div.random_div"); 
}); 

Answer 1

使用:lt和:gt獲得 「第N」 或 「最後N」 元素在你的選擇器中。

DEMO

jQuery(function($){ 
    $("div.randomize").randomize("div.random_div"); 
    $(".random_div:gt(2)").hide(); // This hides anything after the 3rd element 
}); 

Answer 2

試試這個：jsFiddle

(function ($) { 
    $.fn.randomize = function (childElem) { 
     return this.each(function() { 
      var $this = $(this); 
      var elems = shuffle($(childElem)); 
      $this.remove(childElem); 
      for (var i = 0; i < elems.length; i++){ 
       $this.append(elems[i]); 

       //Show only the first three elements 
       if (i <= 2){ 
        $(elems[i]).show(); 
       }else{ 
        $(elems[i]).hide(); 
       } 
      } 
     }); 
    } 
})(jQuery) 

編輯：我同意@kei有一個更清潔，更靈活的答案。我只想指出，他的解決方案應該只用於在頁面加載時將div的一次隨機化。如果您想多次隨機化它們，請務必在隨機化之前取消隱藏div，否則將無法正常工作。例如：

function(){ 
    $(".random_div").show();//make sure all divs are visible 
    $("div.randomize").randomize("div.random_div"); 
    $(".random_div:gt(2)").hide(); 
} 

Answer 3

首先使用一個ID爲容器，這樣你就可以輕鬆地把它叫做：

<div id="randomize"> 
    <div class="random_div">1</div> 
    <div class="random_div">2</div> 
    <div class="random_div">3</div> 
    <div class="random_div">4</div> 
    ... 
</div> 

然後添加此javascript：

var divs = document.getElementById('randomize').getElementsByTagName('div'); 
var nr = 1; 
for(var a = 0 ; a < divs.length ; a++){ 
    if(divs[a].getAttribute('class') == 'random_div'){ 
     if(nr <= 3){ 
      divs[a].style.display = 'inherit'; 
     }else{ 
      divs[a].style.display = 'block'; 
     } 
     nr = nr + 1; 
    } 
}