在加载时随机化子元素
我想用javascript随机化任何
， 元素的
的子元素。 我正在寻找最佳方法。 有人可以帮忙吗？
假设我有一个带有5个
。 在加载时，我希望
元素以随机顺序出现。
快点出我的脑袋：
- 删除
- 将它们存储在一个数组中。
- 随机播放arrays
- 再次在
另请看一下这个问题： 随机化div元素
这就是我做的方式（JSFiddle示例： http ： //jsfiddle.net/LNvqr/2/ ）
如果您使用jQuery并且具有与此类似的HTML：
- one
- two
- three
- four
- five
然后你可以简单地使用.detach来删除和存储
元素的数组。
接下来，使用数组的副本，使用Math.random()生成一个0到1之间的（伪）随机整数，该整数小于数组的大小。 将此作为随机索引从原始（有序）列表复制到新（随机排序）列表中。
在每次迭代中从原始数组中删除随机选择的元素，并选择一个新的随机元素，直到重新插入所有元素：
function shuffleList() { var origList = $("#rndList li").detach(); var newList = origList.clone(); for (var i = 0; i < newList.length; i++) { //select a random index; the number range will decrease by 1 on each iteration var randomIndex = randomInt(newList.length - i); //place the randomly-chosen element into our copy and remove from the original: newList[i] = origList.splice(randomIndex, 1); //place the element back into into the HTML $("#rndList").append(newList[i]); } } function randomInt(maxNum) { //returns a random integer from 0 to maxNum-1 return Math.floor(Math.random() * maxNum); }
您可以使用以下代码实现此目的：
$(function () { var parent = $("#parent-container"); var divs = parent.children(); while (divs.length) { parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]); } });