Отображение случайных дивов с помощью Jquery

Question

У меня есть список, если div, которые содержат изображения. Мне нужно случайно показать 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>

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

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

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

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

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

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