如何使用javascript随机排序两个同步列表？

Question

显然洗牌一个数组并不那么复杂： How to randomize (shuffle) a JavaScript array?

但是如果我必须（Html DOM）同步列表并且我需要打乱元素的顺序，但它们应该具有相同的最终顺序怎么办？

例如初始状态：

<!-- List A) -->
<ul>
   <li>First title</li>
   <li>Second Title</li>
   <li>Thrid title</li>
</ul>
<!-- List B) -->
<ul>
   <li>First text</li>
   <li>Second text</li>
   <li>Thhird text</li>
</ul>

洗牌后：

<!-- List A) -->
<ul>
   <li>Second title</li>
   <li>First Title</li>
   <li>Thrid text</li>
</ul>
<!-- List B) -->
<ul>
   <li>Second text</li>
   <li>First text</li>
   <li>Third text</li>
</ul>

如何做到这一点？

Answer 1

获取项目的长度并循环遍历它并在循环中生成随机数并使用生成的数字选择li并将其附加到父项的末尾。

var ul = document.querySelectorAll("ul");
var length = ul[0].querySelectorAll("li").length;

for (var i=0; i<length; i++){
  var rand =  Math.floor(Math.random()*(length));
  ul.forEach(function(ele){
    ele.appendChild(ele.querySelectorAll("li")[rand]);
  });
}

<ul>
  <li>First title</li>
  <li>Second Title</li>
  <li>Thrid title</li>
</ul>
<ul>
  <li>First text</li>
  <li>Second text</li>
  <li>Thhird text</li>
</ul>

你也可以使用jQuery来编写更少的代码

var $ul = $("ul:first li");
$ul.each(function(){
  var rand =  Math.floor(Math.random()*$ul.length);
  $("ul").each(function(i, ele){
    $("li", ele).eq(rand).appendTo(ele);
  });
});

$("button").click(function(){
  var $ul = $("ul:first li");
  $ul.each(function(){
    var rand =  Math.floor(Math.random()*$ul.length);
    $("ul").each(function(i, ele){
      $("li", ele).eq(rand).appendTo(ele);
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click</button>
<ul>
  <li>First title</li>
  <li>Second Title</li>
  <li>Thrid title</li>
</ul>
<ul>
  <li>First text</li>
  <li>Second text</li>
  <li>Thhird text</li>
</ul>

Answer 2

您可以通过多种方式轻松地打乱 DOM html。一种易于理解的方法是将 DOM 元素转换为数组，然后从其父数组中随机拼接每个元素，并将它们附加回父 DOM 元素。

在下面的 sn-p 中，我使用 jQuery 使代码更易于阅读，但也可以使用原生 javascript 来完成。

$('#shuffle').click(function(){
  var items = [];  // start with an empty array
  $('#list_a li').each(function(i,d){
    
    items.push(d);   // add all li items into the array in their current order
  });
  
  $('#list_a').html('');  // clear the ul list
  
  // execute this loop as many times as items.length
  for(var i=items.length-1; i>=0; i--) {
    var r = Math.floor(Math.random()*items.length);  // pick a random array position
    var item = items.splice(r,1);                    // take that item out of the array
    $('#list_a').append(item);                       // append it back to the ul
  }
  
});

ul
{
 background-color: #def;
 display: inline-block;
 border: 1px solid grey;
 padding: 30px;
 border-radius: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<b>List A</b>
<ul id="list_a">
   <li>First Item</li>
   <li>Second Item</li>
   <li>Third Item</li>
   <li>Fourth Item</li>
   <li>Fifth Item</li>
</ul>
<button id="shuffle">Shuffle</button>