使用Jquery显示随机div

如果包含图像的div，我有一个列表。 每次页面加载时我都需要随机显示其中的4个。 这是我开始使用的代码。

所有这些都将以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(); 

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

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=an; b=bn; return ab?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。 那可以接受吗？