Showing random divs using Jquery

Solution 1:

I find sorting them randomly then showing the first 4 to be the easiest, like this:

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. If you want to also randomize the order (not just which are shown), you already have them sorted so just append them to the same parent in their new order by changing this:

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

You can test that version here.

Solution 2:

This does what you need: 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;
        }
    }
});

Solution 3:

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

Note that this will always show the divs in the same order as the original. Is that acceptable?