仅使用 JavaScript 按类名随机化多个 ul 标签

Question

我的页面上有多个 ul 元素，我需要为某些元素添加一个类名，而那些具有该类名的元素需要随机化。 我可以通过 id 来完成，但我只能在一个页面上有一个 id，所以我不能这样做。 我需要一个没有 JQuery 的 JavaScript 解决方案。 任何帮助表示赞赏。 谢谢你。

这是我用来通过 id 随机化它的内容（尽管它只做一个 ul）：

var thisUL = document.getElementById("myID");
for (var i = thisUL .children.length; i >= 0; i--) {
    thisUL.appendChild(thisUL.children[Math.random() * i | 0]);
}

<ul id="myID">
   <li>random1a</li>
   <li>random1b</li>
   <li>random1c</li>
</ul>

<ul id="myID">
   <li>random2a</li>
   <li>random3b</li>
   <li>random4c</li>
</ul>

<ul id="myID">
   <li>random3a</li>
   <li>random3b</li>
   <li>random3c</li>
</ul>

每个 li 都需要留在自己的 ul 内。

Answer 1

首先，您应该使用class属性，然后使用getElementsByClassName()来定位所有具有class的元素。 然后用 for 循环迭代它们，你就拥有了其余的功能：

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

 <ul class="myElement"> <li>random1a</li> <li>random1b</li> <li>random1c</li> </ul> <ul class="myElement"> <li>random2a</li> <li>random3b</li> <li>random4c</li> </ul> <ul class="myElement"> <li>random3a</li> <li>random3b</li> <li>random3c</li> </ul>