Отображение случайных div с использованием JQuery

У меня есть список, если divs содержат изображения. Я должен случайно показать 4 из них каждый раз, когда страница загружается. Здесь код, с которого я начинаю.

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

Все они начинаются как отображение: none, я хотел бы взять 4 из divs случайным образом и установить их для отображения: block. Я предполагаю, что мне нужно использовать "Math.random()" где-то там, но не уверен, как это делает JQuery. Любые указатели будут оценены.

Ответ 1

Я нахожу сортировку их случайным образом, показывая, что первые 4 являются самыми легкими, например:

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

Здесь вы можете проверить это. Если вы хотите также рандомизировать порядок (а не только то, что показано), вы уже их отсортировали, поэтому просто добавьте их к одному и тому же родителю в новом порядке, изменив это:

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

Вы можете протестировать эту версию здесь.

Ответ 2

Это делает то, что вам нужно: 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

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

Обратите внимание, что это всегда будет показывать divs в том же порядке, что и оригинал. Это приемлемо?