javascript - 打乱 HTML 列表元素的顺序

Question

我有一个列表:

<ul>
    <li>milk</li>
    <li>butter</li>
    <li>eggs</li>
    <li>orange juice</li>
    <li>bananas</li>
</ul>

如何使用 javascript 随机重新排序列表项？

Answer 1

var ul = document.querySelector('ul');
for (var i = ul.children.length; i >= 0; i--) {
    ul.appendChild(ul.children[Math.random() * i | 0]);
}

这是基于Fisher–Yates shuffle ，并利用了这样一个事实，即当您附加一个节点时，它会从原来的位置移走。

即使在巨大的列表(100 000 个元素)上，性能也在 10% 以内。

http://jsfiddle.net/qEM8B/