javascript - 如何在一个随机有序列表中随机化多个无序列表？

我正在尝试使用包含随机答案（随机排列无序列表）的随机问题（随机排列有序列表）进行测试。我可以将有序列表进行随机化，但是我只能获取一个无序列表进行随机化。该代码仅将找到的第一个无序列表随机化。我想随机化所有无序列表。任何帮助表示赞赏。

<ol>
<li>What are the three main areas of the Standard User Interface?
  <ul type="none">
    <li><input type="radio" name="q1" value="0" />A. Header, Banner, Frame, Application Window</li>
    <li><input type="radio" name="q1" value="0" />B. Content Frame, Homepage, Form </li>
    <li><input type="radio" name="q1" value="1" />C. Application Navigator, Banner Frame, Content Frame </li>
    <li><input type="radio" name="q1" value="0" />D. None of the above</li>
  </ul>
</li>

<li>In the User interface, what is the gray toolbar called which allows you to add bookmarks?<br/>

  <ul type="none">
    <li><input type="radio" name="g2" value="0" />A. Gauge</li><br />
    <li><input type="radio" name="g2" value="1" />B. Edge</li><br />
    <li><input type="radio" name="g2" value="0" />C. Remedy</li><br />
    <li><input type="radio" name="g2" value="0" />D. Banner</li><br />
  </ul><br/>
</li>

<li>What can be captured in an update set?<br/>

  <ul type="none">
    <li><input type="radio" name="g3" value="0" />A. Modified CI Rules</li><br />
    <li><input type="radio" name="g3" value="1" />B. Business Rules</li><br />
    <li><input type="radio" name="g3" value="0" />C. Scheduled Jobs</li><br />
    <li><input type="radio" name="g3" value="0" />D. None of the above</li><br />
  </ul>
</li>

<li>What should you always do before you commit an update set?<br/>

  <ul type="none">
    <li><input type="radio" name="g4" value="1" />A. Preview</li><br />
    <li><input type="radio" name="g4" value="0" />B. Merge</li><br />
    <li><input type="radio" name="g4" value="0" />C. Ignore</li><br />
    <li><input type="radio" name="g4" value="0" />D. All of the above</li><br />
  </ul>
</li>

<li>Which of the following is a Business Rule best pratice?<br/>

  <ul type="none">
    <li><input type="radio" name="g5" value="1" />A. Make business rules small and specific</li><br />
    <li><input type="radio" name="g5" value="0" />B. Use of conditions is not necessary</li><br />
    <li><input type="radio" name="g5" value="0" />C. Global business rules should be used</li><br />
    <li><input type="radio" name="g5" value="0" />D. None of the above</li><br />
  </ul>
</li>

<li>Which of the following is a Client Script best practice?<br/>

  <ul type="none">
    <li><input type="radio" name="g6" value="0" />A. Use hard coded data</li><br />
    <li><input type="radio" name="g6" value="0" />B. Maximize server lookup</li><br />
    <li><input type="radio" name="g6" value="1" />C. Do not use g_form.getReference()</li><br />
    <li><input type="radio" name="g6" value="0" />D. All of the above</li><br />
  </ul>
 </li>

 <li>Which of the following are debugging features?<br/>


  <ul type="none">
    <li><input type="radio" name="g7" value="0"/>A. Debug Business Rule</li><br />
    <li><input type="radio" name="g7" value="0"/>B. Javascript</li><br />
    <li><input type="radio" name="g7" value="1"/>C. A and B</li><br />
    <li><input type="radio" name="g7" value="0"/>D. None of the above</li><br />
  </ul>
</li>


</ol>

这是我的随机代码：

var ol = document.querySelector('ol');
temp = ol.cloneNode(true);

for (var i = temp.children.length; i--; ){
    temp.appendChild( temp.children[Math.random() * i |0] );

    ul.parentNode.replaceChild(temp, ol);
}

var ul = document.querySelector('ul');
temp = ul.cloneNode(true);

for (var i = temp.children.length + 1; i--; ){
 temp.appendChild( temp.children[Math.random() * I |0] );

    ul.parentNode.replaceChild(temp, ul);
}

最佳答案

document.querySelector()适用于ol元素，因为只有一个。要捕获ul，请使用querySelectorAll并遍历相同的值。还有一个问题，就是ol和ul的父节点丢失了。 parentNode.replaceChild...语句必须在for循环之后而不是循环之后。在querySelectorAll值的循环中，必须备份父节点。见setting parent node in javascript

    var ol = document.querySelector('ol');
    temp = ol.cloneNode(true);

    for (var i = temp.children.length; i--;) {
        temp.appendChild(temp.children[Math.random() * i | 0]);

    }
    ol.parentNode.replaceChild(temp, ol);

    var ul = document.querySelectorAll('ul'), parent;
    console.log("found " + ul.length + " ul's");
    for (var k = ul.length-1; k >= 0; k--) {
        parent = ul[k].parentNode;
        temp = ul[k].cloneNode(true);

        for (var i = temp.children.length + 1; i--;) {
            temp.appendChild(temp.children[Math.random() * i | 0]);

        }
        parent.replaceChild(temp, ul[k]);
    }

关于javascript - 如何在一个随机有序列表中随机化多个无序列表？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28571767/