时间戳

首页 > 解决方案 > 仅使用 JavaScript 按类名随机化多个 ul 标记

javascript - 仅使用 JavaScript 按类名随机化多个 ul 标记

问题描述

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

标签： javascripthtmlrandom

解决方案

首先，您应该使用 class属性，然后使用来定位所有具有classgetElementsByClassName()的元素。然后用 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>

推荐阅读