使用Jquery显示随机div

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

你可以在这里测试一下.如果你想随机化顺序(不仅仅是显示顺序),你已经对它们进行了排序,所以只需将它们更改为以新顺序将它们附加到同一个父顺序:

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

你可以在这里测试那个版本.