如何使用 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

获取项目的长度并循环遍历它并在循环中生成随机数并使用生成的数字 select 和 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 元素。

在下面的代码片段中，我使用 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>

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

How to randomly order two synchronized lists using javascript?

html

javascript

random

shuffle