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>

所有这些都将以display：none开头，我想随机取4个div并将它们设置为display：block。我假设我需要在某处使用“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();

You can test it out here。如果你想随机化顺序（不仅仅是显示的顺序），你已经对它们进行了排序，所以只需将它们更改为新的顺序即可将它们附加到同一个父顺序中：

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

You can test that version here

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。那可以接受吗？

使用Jquery显示随机div

3 个答案: