仅使用 JavaScript 按类名随机化多个 ul 标记答案

【问题标题】：Randomize Multiple ul tags by class name using only JavaScript仅使用 JavaScript 按类名随机化多个 ul 标记
【发布时间】：2020-10-22 12:08:59
【问题描述】：

我的页面上有多个 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 内。

【问题讨论】：

使用类而不是 id。元素 id 应该是唯一的。比如<ul class="myClass">。然后用 document.getElementsByClassName("myClass") 选择它们。

标签： javascript html random

【解决方案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>

【讨论】：