javascript - 随机播放HTML列表元素顺序 [英] javascript - shuffle HTML list element order

问题描述

我有一个列表：

 < ul> 
< li>牛奶< / li> 
< li>黄油< / li> 
< li>鸡蛋< / li> 
< li>橙汁< / li> 
< li>香蕉< / li> 
< / ul> 
  

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

解决方案

  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/

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?

解决方案

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.

Performance is within 10% of shuffling a detached copy even on huge lists (100 000 elements).

http://jsfiddle.net/qEM8B/

这篇关于javascript - 随机播放HTML列表元素顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！