javascript - 随机播放 HTML 列表元素顺序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7070054/
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
javascript - shuffle HTML list element order
提问by Web_Designer
I have a list:
我有一个清单：
<ul>
<li>milk</li>
<li>butter</li>
<li>eggs</li>
<li>orange juice</li>
<li>bananas</li>
</ul>
Using javascript how can I reorder the list items randomly?
使用 javascript 如何随机重新排序列表项？
回答by Alexey Lebedev
var ul = document.querySelector('ul');
for (var i = ul.children.length; i >= 0; i--) {
ul.appendChild(ul.children[Math.random() * i | 0]);
}
This is based on Fisher–Yates shuffle, and exploits the fact that when you append a node, it's moved from its old place.
这是基于Fisher–Yates shuffle，并利用了这样一个事实，即当您附加节点时，它会从旧位置移动。
Performance is within 10% of shuffling a detached copy even on huge lists (100 000 elements).
即使在巨大的列表（100 000 个元素）上，性能也与 shuffle 分离副本的 10% 以内。
回答by Web_Designer
Simply put, like this:
简单来说，像这样：
JS:
JS：
var list = document.getElementById("something"),
button = document.getElementById("shuffle");
function shuffle(items)
{
var cached = items.slice(0), temp, i = cached.length, rand;
while(--i)
{
rand = Math.floor(i * Math.random());
temp = cached[rand];
cached[rand] = cached[i];
cached[i] = temp;
}
return cached;
}
function shuffleNodes()
{
var nodes = list.children, i = 0;
nodes = Array.prototype.slice.call(nodes);
nodes = shuffle(nodes);
while(i < nodes.length)
{
list.appendChild(nodes[i]);
++i;
}
}
button.onclick = shuffleNodes;
HTML:
HTML：
<ul id="something">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<button id="shuffle" type="button">Shuffle List Items</button>
回答by Stefan Gruenwald
var list = document.getElementById("something");
function shuffleNodes() {
var nodes = list.children, i = 0;
nodes = Array.prototype.sort.call(nodes);
while(i < nodes.length) {
list.appendChild(nodes[i]);
++i;
}
}
shuffleNodes();
回答by Lumo5
Here is a very simple way to shuffle with JS:
这是一种非常简单的 JS shuffle 方法：
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return 0.5 - Math.random()});
回答by Gustavo G.
Based no @Alexey Lebedev's answer, if you prefer a jQuery function that shuffles elements, you can use this one:
基于没有@Alexey Lebedev 的回答，如果你更喜欢一个 jQuery 函数来随机播放元素，你可以使用这个：
$.fn.randomize = function(selector){
var $elems = selector ? $(this).find(selector) : $(this).children();
for (var i = $elems.length; i >= 0; i--) {
$(this).append($elems[Math.random() * i | 0]);
}
return this;
}
And then call it like this:
然后像这样调用它：
$("ul").randomize(); //shuffle all the ul children
$("ul").randomize(".item"); //shuffle all the .item elements inside the ul
$(".my-list").randomize(".my-element"); //shuffle all the .my-element elements inside the .my-list element.
