Trying to shuffle a container's (a div) DOM elements (other divs) with a particular class name ("div"). Other divs ("extra") should stay put in the place where they are.
So far I have used the modified shuffle algorithm from link
The code I have almost did the trick but the "Extra" div is appended at the bottom of the stack while it's supposed to stay atop.
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>Any hints greatly appreciated.
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>Since you wish to leave the first element out of the shuffle and arrays of elements are 0 based you can change * i | 0] to * 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>