使用 Jquery 显示随机 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4205166/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Showing random divs using Jquery
提问by Mike Muller
I have a list if divs which contain images. I need to randomly show 4 of these each time the page loads. Here's the code I'm starting with.
如果 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>
All of these will start as display:none, I'd like to take 4 of the divs at random and set them to display:block. I'm assuming I need to use "Math.random()" in there somewhere but not sure how JQuery does this. Any pointers would be appreciated.
所有这些都将从 display:none 开始，我想随机选取 4 个 div 并将它们设置为 display:block。我假设我需要在某处使用“Math.random()”，但不确定 JQuery 是如何做到这一点的。任何指针将不胜感激。
回答by Nick Craver
I find sorting them randomly then showing the first 4 to be the easiest, like this:
我发现对它们进行随机排序，然后显示前 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. If you want to also randomize the order (not just which are shown), you already have them sorted so just append them to the same parent in their new order by changing this:
你可以在这里测试一下。如果您还想随机化顺序（不仅仅是显示的顺序），您已经对它们进行了排序，因此只需通过更改以下内容将它们按新顺序附加到同一个父级：
$(divs).show();
//to this:
$(divs).appendTo(divs[0].parentNode).show();
回答by Vincent Mimoun-Prat
This does what you need: http://www.jsfiddle.net/Yn2pn/1/
这可以满足您的需求：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;
}
}
});
回答by Phrogz
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();
});
});
Note that this will always show the divs in the same order as the original. Is that acceptable?
请注意，这将始终以与原始顺序相同的顺序显示 div。可以接受吗？
