javascript - shuffle liste HTML ordre des éléments

j'ai une liste:

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

en utilisant javascript Comment puis-je réordonner les éléments de la liste au hasard?

29
demandé sur Web_Designer 2011-08-15 23:59:02

5 réponses 

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

Ceci est basé sur shuffle de Fisher–Yates, et exploite le fait que lorsque vous ajoutez un nœud, il est déplacé de son ancienne position.

Performance est à moins de 10% de mélanger un décollement de la copie, même sur les listes énormes (100 000 éléments).

http://jsfiddle.net/qEM8B/

62
répondu Alexey Lebedev 2014-06-19 15:05:45

il suffit de mettre, comme ceci:

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>

Démo: http://jsbin.com/itesir/edit#preview

9
répondu 2011-08-15 20:50:42 
    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();
0
répondu Stefan Gruenwald 2013-10-30 04:51:23

Voici une façon très simple de mélanger avec 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

0
répondu Lumo5 2017-02-02 06:30:05

basé sur la réponse de No @Alexey Lebedev, si vous préférez une fonction jQuery qui mélange les éléments, vous pouvez utiliser celle-ci:

$.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;
}

Et ensuite appeler comme ceci:

$("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.
-1
répondu Gustavo G. 2016-09-14 14:06:17