Randomize entire UL elements and not li list-CodePudding

Found this on another answer but a few years ago. Looks like it doesn't work anymore. I really need that for my project... is it possible to randomize the entire ul element and not the list inside of it?

So for example I have 100 ul elements on my page and want them all to randomize on every refresh of the page.

var ulList = document.getElementsByClassName("myElement");
const body = document.body;
for (let j = 0; j < ulList.length; j  ) {
  body.appendChild(body.children[Math.random() * j | 0])
}



<div style="margin: auto;">

<ul >
   <div id="r_tag"><script>ri();</script></div>

   <div id="r_icon"><script>ri();</script></div>

   <div id="r_plan"><script>ri();</script></div>
</ul>

<ul >
   <div id="a_tag"><script>re();</script></div>

   <div id="a_icon"><script>re();</script></div>

   <div id="a_plan"><script>re();</script></div>
</ul>

<ul >
   <div id="p_tag"><script>po();</script></div>

   <div id="p_icon"><script>po();</script></div>

   <div id="p_plan"><script>po();</script></div>
</ul>

</div>

CodePudding user response：

You should definitely use a proper shuffle algorithm for generating a random order in an array. Below is an implementation of the Durstenfeld shuffle (this is a slightly modified Fisher-Yates algorithm).

In my snippet below I simply placed the shuffled <ul>s into the document.body. In a real application you should of course identify the parent container for all the <ul>s and place them there instead.

function shfl(a){
 for(let j,i=a.length;i>1;){
  j=Math.floor(Math.random()*i--);
  if (i!=j) [a[i],a[j]]=[a[j],a[i]]
 }
 return a
}

const uls=[...document.getElementsByClassName("myElement")];


(document.querySelector("button").onclick=ev=>shfl(uls).map(ul=>document.body.append(ul)))();

<button>shuffle</button>
<ul >
   <li>first random1a</li>
   <li>first random1b</li>
   <li>first random1c</li>
</ul>

<ul >
   <li>second random2a</li>
   <li>second random3b</li>
   <li>second random4c</li>
</ul>

<ul >
   <li>third random3a</li>
   <li>third random3b</li>
   <li>third random3c</li>
</ul>

OK, I added a few parentheses and turned the event-listener-definition into an IIFE. Now the suffle will also happen immediately after loading.

CodePudding user response：

Yes, you need to add an identifier to the container div, so let's give it an id="container" so we can select it, and then get it's child and randomly append to it.

var ulList = document.getElementsByClassName("myElement");
const container = document.querySelector('#container');
for (let j = 0; j < ulList.length; j  ) {
  container.appendChild(container.children[Math.random() * j | 0])
}

<div style="margin: auto;" id="container">

<ul >
   <div id="r_tag">random1a</div>

   <div id="r_icon">random1b</div>

   <div id="r_plan">random1c</div>
</ul>

<ul >
   <div id="a_tag">random2a</div>

   <div id="a_icon">random3b</div>

   <div id="a_plan">random4c</div>
</ul>

<ul >
   <div id="p_tag">random3a</div>

   <div id="p_icon">random3a</div>

   <div id="p_plan">random3a</div>
</ul>

</div>