如何在一个随机化的有序列表中随机化多个无序列表

How do I randomize multiple unordered lists within a randomized ordered list?

本文关键字：随机化 列表 无序 一个      更新时间：2023-12-17

我正试图用包含随机答案（随机化无序列表）的随机问题（随机化有序列表）进行测试。我可以让有序列表随机化，但我只能让一个无序列表随机化。该代码只对它找到的第一个无序列表进行随机化。我想把所有无序的列表都随机化。感谢您的帮助。

<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值的循环中，必须备份父节点；请参阅在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]);
    }
相关文章：