Membuat Random Daftar List Element UL dengan Javascript

Membuat Random Daftar List Element UL dengan Javascript | reload.id - Sebenarnya rubrik tentang javascript pernah dibuat dibeberapa artikel yang telah diposting, namun kali ini admin mencoba mengarsipkan snipet-snipet javascript yang admin pakai dan mungkin bisa bermanfaat bagi yang sedang mencarinya. 

Setelah sebelumnya admin share artikel tentang Menampilkan Postingan Random Secara Acak Pada Blogger, kali ini admin mau share cara Membuat Random Daftar List Element UL dengan Javascript yang pada prinsipnya masih menggunakan javascript yang sama, hanya saja berbeda pada selector element yang ditargetkan. 

Dalam kasus sebelumnya pernah juga diterapkan untuk menampilkan daftar kontak marketing secara random dilengkapi link ke berbagai social media dengan tambahan CSS maka hasilnya seperti gambar berikut :

Berikut contoh kode html untuk membuat daftar list UL menjadi random :

<div id="container">
<ul>
<li>Nama Agen Pulsa<li>
<li>WhatsApp<li>
<li>Telegram<li>
</ul>

<ul>
<li>Nama Master Pulsa<li>
<li>WhatsApp<li>
<li>Telegram<li>
</ul>

</div>

Berikut snippet javascriptnya : 

<script>
var uls = document.querySelectorAll('#container');
for (var j = 0; j < uls.length; j++) {
var ul = uls.item(j);
for (var i = ul.children.length; i >= 0; i--) {
ul.appendChild(ul.children[Math.random() * 4 | 0]);
}
}
</script> 

Keterangan : 
#container adalah sebagai selector yang akan di random hanya dalam id container saja.

Maka dengan kode diatas akan menghasilkan daftar list yang akan acak jika di reload. untuk contoh kasus ini admin reload.id terapkan untuk menampilkan nama agen / master pulsa dimana marketingnya lebih dari 1 yang membuat website promosi pulsanya di reload.id sehingga posisi nama marketingnya random setiap kali di reload. bisa dilihat disalah satu artikel tentang server pulsa berikut :
Itulah cara Membuat Random Daftar List Element UL dengan Javascript yang pernah admin terapkan di website reload.id yang mudah-mudahan bermanfaat untuk diarsipkan :D

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel