試圖用特定的類名（“div”）打亂容器（一個 div）的 DOM 元素（其他 div）。其他 div（“額外”）應該留在它們所在的位置。
到目前為止，我已經使用了來自鏈接的修改后的隨機播放演算法
我幾乎完成了代碼，但“Extra” div 被附加在堆疊的底部，而它應該保持在頂部。
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>任何提示都非常感謝。
uj5u.com熱心網友回復：
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>uj5u.com熱心網友回復：
由于您希望將第一個元素排除在隨機播放之外，并且元素陣列基于 0，您可以更改* i | 0]為* 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/452204.html
標籤：javascript dom 洗牌
上一篇：w3c檔案xpath不回傳節點集