尝试用特定的类名(“div”)来打乱容器(一个div)的DOM元素(其他div)。其他的divs(“额外的”)应该呆在他们所在的地方。
到目前为止,我使用的是来自link的修改后的shuffle算法
我的代码几乎做到了这一点,但“额外”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>
任何提示都非常感谢。
2条答案
按热度按时间643ylb081#
为了避免移动指向DOM元素的指针,
我只是在这里使用他们在接口上的位置索引(aOrder):
我郑重声明
评论来自ViliusL
“1”总是在底部。
完全正确!前面的算法总是把第一个元素放在最后。实际上,初始集合总是以相同的顺序读取。
我通过将div的集合更改为Array来修复它,这样我就可以实际更改它们的顺序。所以任何新的 Shuffle 都将基于他们的实际位置。
7lrncoxx2#
由于您希望将第一个元素排除在shuffle之外,并且元素数组以0为基础,因此可以将
* i | 0]
更改为* i | 1]