Question

这一定很简单，但我无法使其正常工作。我正在使用Javascript创建测验程序。这是我的基本标记：

<ul>
<li>option1</li>
<li>option2</li>
<li>option3</li>
</ul>
<ul>
<li>option1</li>
<li>option2</li>
<li>option3</li>
</ul>
....
<ul>
<li>option1</li>
<li>option2</li>
<li>option3</li>
</ul>

要求： 我必须在每次加载页面时随机显示列表项。我有这个脚本用于选择随机选项（取自另一个讨论）：

var ul = document.querySelector('ul');
for (var i = ul.children.length; i >= 0; i--) {
        ul.appendChild(ul.children[Math.random() * i | 0]);
}

但问题是它只适用于第一个ul元素。我想要为所有'ul'元素运行这个脚本。

有人可以告诉我该怎么做吗？

Answer 1

使用document.querySelectorAll代替document.querySelector。这将为您提供文档中所有ul的数组。然后遍历数组并为每个数组执行您正在执行的操作。

var ul = document.querySelectorAll('ul');
for (var ulIndex = ul.length - 1; ulIndex >= 0; ulIndex--) {
    for (var i = ul[ulIndex].children.length; i >= 0; i--) {
        ul[ulIndex].appendChild(ul[ulIndex].children[Math.random() * i | 0]);
    }
}

希望它有所帮助。未经测试。

Answer 2

改为使用.querySelectorAll（see mozilla doc）。

这里是实时代码段：

＆＃13;

var uls = document.querySelectorAll('ul');
for (var j = 0; j < uls.length; j++) {
  var ul = uls.item(j);
  for (var i = ul.children.length; i >= 0; i--) {
    ul.appendChild(ul.children[Math.random() * i | 0]);
  }
}

＆＃13;

<ul>
<li>option1</li>
<li>option2</li>
<li>option3</li>
</ul>
<ul>
<li>option1</li>
<li>option2</li>
<li>option3</li>
</ul>
<ul>
<li>option1</li>
<li>option2</li>
<li>option3</li>
</ul>

＆＃13;

Answer 3

您应该查询所有必需的ul，然后迭代它们并应用您的脚本。

var ul = document.querySelectorAll('ul');

function haveFun(ul) {
    for (var i = ul.children.length; i >= 0; i--) {
        ul.appendChild(ul.children[Math.random() * i | 0]);
    }
}

Array.prototype.forEach.call(ul, haveFun);

随机显示列表项

3 个答案: