Affichage de divs aléatoires à l'aide de Jquery

J'ai une liste si les divs qui contiennent des images. J'ai besoin de façon aléatoire show 4 de ces chaque fois que le chargement de la page. Voici le code, je commence avec.

<div class="Image"><img src="/image1.jpg"></div>
<div class="Image"><img src="/image2.jpg"></div>
<div class="Image"><img src="/image3.jpg"></div>
<div class="Image"><img src="/image4.jpg"></div>
<div class="Image"><img src="/image5.jpg"></div>
<div class="Image"><img src="/image6.jpg"></div>
<div class="Image"><img src="/image7.jpg"></div>

Tous ces va commencer comme d'affichage:aucun, j'aimerais prendre 4 des divs au hasard et les mettre en display:block. Je suppose que j'ai besoin d'utiliser des Mathématiques".random()" là quelque part mais vous ne savez pas comment JQuery fait ça. Tous les pointeurs serait appréciée.

source d'informationauteur Mike Muller

  1. 17

    - Je trouver les trier de manière aléatoire puis en affichant les 4 premiers à être le plus facile, comme ceci:

    var divs = $("div.Image").get().sort(function(){ 
            return Math.round(Math.random())-0.5; //so we get the right +/- combo
           }).slice(0,4);
$(divs).show();

    Vous pouvez le tester ici. Si vous souhaitez également de façon aléatoire l'ordre (et pas seulement qui sont indiquées), vous les avez déjà triées de manière juste les ajouter à la même parent dans leur nouvel ordre par la modification de cette:

    $(divs).show();
//to this:
$(divs).appendTo(divs[0].parentNode).show();

    Vous pouvez tester cette version ici.

  2. 3

    Ce n'est ce qu'il vous faut: http://www.jsfiddle.net/Yn2pn/1/

    $(document).ready(function() {
    $(".Image").hide();

    var elements = $(".Image");
    var elementCount = elements.size();
    var elementsToShow = 4;
    var alreadyChoosen = ",";
    var i = 0;
    while (i < elementsToShow) {
        var rand = Math.floor(Math.random() * elementCount);
        if (alreadyChoosen.indexOf("," + rand + ",") < 0) {
            alreadyChoosen += rand + ",";
            elements.eq(rand).show();
            ++i;
        }
    }
});
  3. 2
    jQuery(function($){
  var sortByN = function(a,b){ a=a.n; b=b.n; return a<b?-1:a>b?1:0 };
  $.each( $('div.Image').map(
    function(){ return { div:this, n:Math.random() }; }
  ).get().sort(sortByN), function(i){
    if (i<4) $(this.div).show();
  });
});

    Notez qu'il sera toujours montrer les divs dans le même ordre que l'original. Est acceptable?