Mostrando divs casuali usando Jquery

Question

Ho una lista se div che contengono immagini. Devo mostrare casualmente 4 di questi ogni volta che la pagina viene caricata. Ecco il codice con cui sto iniziando.

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

Tutti questi inizieranno come display: none, vorrei prendere 4 dei div a caso e li impostato su display: block. Suppongo di dover usare "Math.random()" da qualche parte ma non sono sicuro di come JQuery lo faccia. Qualsiasi suggerimento sarebbe apprezzato.

Answer 1

li trovo l'ordinamento in modo casuale quindi che mostra i primi 4 per essere il più facile, in questo modo:

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(); 

You can test it out here. Se si vuole randomizzare anche l'ordine (e non solo che sono mostrate), li avete già ordinato così appena li aggiunge alla stesso genitore nel loro nuovo ordine modificando questo:

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

You can test that version here.

Answer 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(); 
    }); 
}); 

Si noti che questo mostrerà sempre i div nello stesso ordine dell'originale. È accettabile?

Answer 3

Questo non fa quello che vi serve: 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; 
     } 
    } 
});