javascript - 随机播放 HTML 列表元素顺序

Question

我有一个清单：

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

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

Answer 1

简单地说，像这样：

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：

<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>

演示：http://jsbin.com/itesir/edit#preview

Answer 2

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/

Answer 3

    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();

Answer 4

基于没有@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;
}

然后这样称呼它：

$("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.

Answer 5

这里有一个非常简单的用 JS 洗牌的方法：

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return 0.5 - Math.random()});

http://www.w3schools.com/js/js_array_sort.asp

Answer 6

我正在寻找一个原型函数。也许这对某人有帮助。

Element.prototype.shuffleChildren = function() {
  for (var i = this.children.length; i >= 0; i--) {
    this.appendChild(this.children[Math.random() * i | 0]);
  }
};

document.querySelector('body').shuffleChildren();

Answer 7

使用这个：

function htmlShuffle(elem) {
    function shuffle(arr) {
        var len = arr.length;
        var d = len;
        var array = [];
        var k, i;
        for (i = 0; i < d; i++) {
            k = Math.floor(Math.random() * len);
            array.push(arr[k]);
            arr.splice(k, 1);
            len = arr.length;
        }
        for (i = 0; i < d; i++) {
            arr[i] = array[i];
        }
        return arr;
    }
    var el = document.querySelectorAll(elem + " *");
    document.querySelector(elem).innerHTML = "";
    
    let pos = [];
    for (let i = 0; i < el.length; i++) {
        pos.push(i);
    }
    
    pos = shuffle(pos);
    for (let i = 0; i < pos.length; i++) {
        document.querySelector(elem).appendChild(el[pos[i]]);
    }
}

htmlShuffle("ul");

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