Javascript Girl
  1. Javascript Girl
  3. Javascript – shuffle l'ordre des éléments de la liste HTML
Intereting Posts
Comment faire de tout dans un champ de texte des lettres majuscules / majuscules? Qu'est ce que setTimeout retourne? Le serveur Node.js accepte les demandes POST Copier la valeur d'une variable vers une autre Pour obtenir une valeur définie dans javascript dans le code derrière Explication de mémoires Javascript? Ne peut-il pas simplement utiliser ES6 promettre de mettre à jour les données dans ng-repeat? Exécuter un script après le panneau de mise à jour AJAX asp.net Activer les lignes dans Bokeh en utilisant Multiselect La différence de performance JavaScript entre les double égal (==) et les triple égal (===) Comment pouvez-vous changer l'icône du curseur pour signaler que les zones d'un Google Chart sont cliquables? Symbole généré dynamiquement Suppression de wrapper div sans Jquery (javascript brut) Qu'est-ce qui provoque l'erreur "jqGrid n'est pas une fonction"? Comment utiliser nodejs pour ouvrir un navigateur par défaut et naviguer vers un URL spécifique

Javascript – shuffle l'ordre des éléments de la liste HTML

J'ai une liste: 

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

Utilisation de javascript Comment puis-je réorganiser les éléments de la liste au hasard? 

 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 Fisher-Yates shuffle , et exploite le fait que lorsque vous ajoutez un noeud, il est déplacé de son ancien lieu.

Les performances se situent à moins de 10% de la modification d'une copie détachée, même sur des listes énormes (100 000 éléments).

http://jsfiddle.net/qEM8B/

Autrement dit, 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>

Demo: http://jsbin.com/itesir/edit#preview 

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

En fonction de la réponse de @Alexey Lebedev, si vous préférez une fonction jQuery qui mélange les éléments, vous pouvez l'utiliser: 

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

Voici un moyen 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