随机化整个UL元素，而不是li列表

Question

几年前在另一个答案中发现了这一点。看起来它已经不起作用了。我的项目真的需要这个。。。是否可以随机化整个ul元素，而不是其中的列表？

例如，我的页面上有100个ul元素，希望它们在每次刷新页面时都随机化。

var ulList = document.getElementsByClassName("myElement");
const body = document.body;
for (let j = 0; j < ulList.length; j++) {
body.appendChild(body.children[Math.random() * j | 0])
}

<div style="margin: auto;">
<ul class="i-table yellow myElement">
<div id="r_tag"><script>ri();</script></div>
<div id="r_icon"><script>ri();</script></div>
<div id="r_plan"><script>ri();</script></div>
</ul>
<ul class="i-table green myElement">
<div id="a_tag"><script>re();</script></div>
<div id="a_icon"><script>re();</script></div>
<div id="a_plan"><script>re();</script></div>
</ul>
<ul class="i-table pink myElement">
<div id="p_tag"><script>po();</script></div>
<div id="p_icon"><script>po();</script></div>
<div id="p_plan"><script>po();</script></div>
</ul>
</div>

Answer 1

您绝对应该使用适当的shuffle算法来生成数组中的随机顺序。下面是Durstenfeld shuffle的一个实现(这是一个稍微修改过的Fisher Yates算法(。

在下面的代码段中，我简单地将打乱的<ul>放入document.body。在实际应用程序中，您当然应该识别所有<ul>的父容器，并将它们放在那里。

function shfl(a){
for(let j,i=a.length;i>1;){
j=Math.floor(Math.random()*i--);
if (i!=j) [a[i],a[j]]=[a[j],a[i]]
}
return a
}
const uls=[...document.getElementsByClassName("myElement")];
(document.querySelector("button").onclick=()=>document.body.append(...shfl(uls)))();

<button>shuffle</button>
<ul class="myElement">
<li>first random1a</li>
<li>first random1b</li>
<li>first random1c</li>
</ul>
<ul class="myElement">
<li>second random2a</li>
<li>second random3b</li>
<li>second random4c</li>
</ul>
<ul class="myElement">
<li>third random3a</li>
<li>third random3b</li>
<li>third random3c</li>
</ul>

好的，我添加了几个括号，并将事件侦听器定义转换为IIFE。现在，填充也将在加载后立即发生。

稍后我突然想到，element.append()也可以用DOM元素列表作为参数来调用。这使得可以使用ES6扩展运算符(...(并且完全不使用Array.prototype.map()。

Answer 2

是的，您需要向containerdiv添加一个标识符，所以让我们给它一个id="container"，这样我们就可以选择它，然后得到它的子级并随机给它append。

var ulList = document.getElementsByClassName("myElement");
const container = document.querySelector('#container');
for (let j = 0; j < ulList.length; j++) {
container.appendChild(container.children[Math.random() * j | 0])
}

<div style="margin: auto;" id="container">
<ul class="i-table yellow myElement">
<div id="r_tag">random1a</div>
<div id="r_icon">random1b</div>
<div id="r_plan">random1c</div>
</ul>
<ul class="i-table green myElement">
<div id="a_tag">random2a</div>
<div id="a_icon">random3b</div>
<div id="a_plan">random4c</div>
</ul>
<ul class="i-table pink myElement">
<div id="p_tag">random3a</div>
<div id="p_icon">random3a</div>
<div id="p_plan">random3a</div>
</ul>
</div>