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

Question

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

<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); 
}

Answer 1

document.querySelector() 适用于 ol 元素，因为只有一个。要捕获 ul，请使用 querySelectorAll 并循环遍历相同的值。还有一个问题是ol和ul的父节点丢失。 parentNode.replaceChild... 语句必须位于 for 循环之后，而不是在 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]);
    }