How to randomly order two synchronized lists using javascript?

Question

Aparently shuffling an array is not so complicated: How to randomize (shuffle) a JavaScript array?

But what if I have to (Html DOM) lists that are synchronized and I need to shuffle the order of the elements, but they should have the same final order?

For example, initial state:

<!-- 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>

After shuffle:

<!-- 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>

How can this be achieved?

So you want to shuffle the first array and have the second array have the same order as the first, correct? — George, Nov 26 '18 at 10:47

Mohammad · Accepted Answer · 2018-11-26T11:12:47.940

Get length of items and loop through it and in loop generate random number and using generated number select an li and append it end of parent.

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>

Also you can use jQuery to write less code

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>

score 0 · Answer 2 · answered Nov 26 '18 at 10:59

You can easily shuffle an DOM html in various number of ways. One way that is easy to understand is to convert the DOM elements into an array, then randomly splice each element out of its parent array and append them back to the parent DOM element.

In my snippet below, I used jQuery to make the code easier to read, but it can be done with native javascript just as well.

$('#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>

Note that this is not ordering two sincronized lists.. but thanks anyway — Toni Michel Caubet, Nov 26 '18 at 13:25

How to randomly order two synchronized lists using javascript?

2 Answers2