Intentando barajar los elementos DOM de un contenedor (un div) (otros divs) con un nombre de clase particular ("div"). Otros divs ("extra") deben permanecer en el lugar donde están.
Hasta ahora he usado el algoritmo de reproducción aleatoria modificado del enlace
El código que tengo casi funcionó, pero el div "Extra" se agrega en la parte inferior de la pila, mientras que se supone que debe permanecer en la parte superior.
let divs = document.getElementsByClassName("div") let divsNumber = divs.length; let divver = document.getElementsByClassName("divver")[0] function shuffler() { for (var i = divsNumber; i >= 0; i--) { if (!divver.children[i].classList.contains("div")) { divver.appendChild(divver.children[Math.random() * i | 0]); } } } <div class="divver"> <div class="extra"> Extra </div> <div class="div"> 1 </div> <div class="div"> 2 </div> <div class="div"> 3 </div> <div class="div"> 4 </div> <div class="div"> 5 </div> </div> <button onclick="shuffler()" id="shuffles">Shuffle 'em</button>Cualquier sugerencia muy apreciada.
const divver = document.querySelector('div.divver') , ShuffleDivs = divver.querySelectorAll('div.div') // just select this group ; document.querySelector('button#shuffles').onclick = () => { for (let i = ShuffleDivs.length; i >= 0; i--) { divver.appendChild(ShuffleDivs[Math.random() * i | 0]) } } <div class="divver"> <div class="extra"> Extra </div> <div class="div"> 1 </div> <div class="div"> 2 </div> <div class="div"> 3 </div> <div class="div"> 4 </div> <div class="div"> 5 </div> </div> <button id="shuffles">Shuffle 'em</button>Dado que desea dejar el primer elemento fuera de la reproducción aleatoria y las matrices de elementos se basan en 0, puede cambiar * i | 0] a * i | 1]
let divs = document.getElementsByClassName("div") let divsNumber = divs.length; let divver = document.getElementsByClassName("divver")[0] function shuffler() { for (var i = divsNumber; i >= 0; i--) { if (!divver.children[i].classList.contains("div")) { divver.appendChild(divver.children[Math.random() * i | 1]); } } } <div class="divver"> <div class="extra"> Extra </div> <div class="div"> 1 </div> <div class="div"> 2 </div> <div class="div"> 3 </div> <div class="div"> 4 </div> <div class="div"> 5 </div> </div> <button onclick="shuffler()" id="shuffles">Shuffle 'em</button>