Hiển thị số ngẫu nhiên bằng cách sử dụng Jquery

Question

Tôi có một danh sách nếu div có chứa hình ảnh. Tôi cần phải hiển thị ngẫu nhiên 4 trong số này mỗi khi trang tải. Đây là mã tôi bắt đầu.

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

Tất cả những điều này sẽ bắt đầu hiển thị: không, tôi muốn lấy 4 trong số các div một cách ngẫu nhiên và đặt chúng hiển thị: chặn. Tôi giả sử tôi cần phải sử dụng "Math.random()" trong đó một nơi nào đó nhưng không chắc chắn làm thế nào JQuery thực hiện điều này. Bất kỳ con trỏ sẽ được đánh giá cao.

Answer 1

tôi thấy họ sắp xếp một cách ngẫu nhiên sau đó cho thấy 4 đầu tiên là đơn giản nhất, như thế này:

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. Nếu bạn cũng muốn để ngẫu nhiên thứ tự (không chỉ được hiển thị), bạn đã có chúng được sắp xếp vì vậy chỉ cần gắn nó vào phần cùng cha mẹ theo thứ tự mới của họ bằng cách thay đổi này:

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

Lưu ý rằng điều này sẽ luôn hiển thị các div theo thứ tự giống như bản gốc. Điều đó có được chấp nhận không?

Answer 3

này làm những gì bạn cần: 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; 
     } 
    } 
});