Mostrando divs aleatorios usando Jquery

Question

Tengo una lista si divs que contienen imágenes. Necesito mostrar aleatoriamente 4 de estos cada vez que se carga la página. Este es el código con el que estoy empezando.

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

Todo esto comenzará como display: none, me gustaría tener 4 de los divs al azar y los puso a display: block. Asumo que necesito usar "Math.random()" en alguna parte, pero no estoy seguro de cómo JQuery hace esto. Cualquier indicador sería apreciada.

Answer 1

encuentro de clasificación de forma aleatoria a continuación, muestra los primeros 4 a ser el más fácil, así:

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. Si desea cambiar aleatoriamente también el orden (no sólo que se muestran), que ya ha ordenado a lo que acaba de añadir a la misma matriz en su nuevo orden cambiando esto:

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

Tenga en cuenta que esto siempre mostrará los divs en el mismo orden que el original. Es eso aceptable?

Answer 3

Esto hace lo que necesita: 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; 
     } 
    } 
});