Shuffle DOM Elements Using The Fisher-Yates Algorithm - jQuery Scramble

File Size: 3.63 KB
Views Total: 200
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Shuffle DOM Elements Using The Fisher-Yates Algorithm - jQuery Scramble

Scramble is a tiny jQuery plugin that uses the fisher yates shuffle algorithm to scramble a set of elements.

The Fisher-Yates shuffle is an algorithm for generating a random permutation of a finite sequence. The algorithm effectively puts all the elements into a hat; it continually determines the next element by randomly drawing an element from the hat until no elements remain. The algorithm produces an unbiased permutation: every permutation is equally likely. The modern version of the algorithm is efficient: it takes time proportional to the number of items being shuffled and shuffles them in place. See WIKI for details.

How to use it:

1. Download and include the Scramble JavaScript library after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.scramble.js"></script>

2. Use this plugin to shuffle an HTML list.

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
  <li>item 9</li>
  <li>item 10</li>
</ul>
var el = $('ul li').scramble();
$('ul').empty().append(el);
console.log(el);

This awesome jQuery plugin is developed by dgsiegel. For more Advanced Usages, please check the demo page or visit the official website.