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元素。

在下面的代码段中，我使用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随机排序两个同步列表？

2 个答案: