javascript - modifier l'ordre des éléments d'une liste HTML

Question

J'ai une liste :

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

Comment puis-je réorganiser les éléments de la liste de manière aléatoire en utilisant javascript ?

Answer 1

J'étais à la recherche d'une fonction prototype. Peut-être que cela aidera quelqu'un.

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 2

Voici une solution qui n'utilise pas de boucle.

function shuffle_children(element) {
    element.append(...Array.from(element.children).sort(function () {
        return Math.random() - 0.5;
    }));
}

Answer 3

D'après la réponse de @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;
}

Puis, appelez-le 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.