jQuery: Shuffle Plugin

Tags: array, JavaScript, jquery, plugin, shuffle

I recently came across a really compact array shuffling function on JSFromHell.com, which I thought would make a nifty jQuery plugin.

This jQuery shuffle plugin could be applied to any HTML element or Array object.

 
(function($){
  $.fn.shuffle = function() {
    return this.each(function(){
      var items = $(this).children();
      return (items.length)
        ? $(this).html($.shuffle(items))
        : this;
    });
  }
 
  $.shuffle = function(arr) {
    for(
      var j, x, i = arr.length; i;
      j = parseInt(Math.random() * i),
      x = arr[--i], arr[i] = arr[j], arr[j] = x
    );
    return arr;
  }
})(jQuery);

Due to line wrapping issues in this post I inserted a few hard carriage returns in the above snippet (sorry).

Example 1: shuffle an unordered list

 
$('ul').shuffle();

Example 2: shuffle an array

 
var arr = [1,2,3,4,5,6];
arr = $.shuffle(arr);

There is a demo here. And for those interested I encourage you to download the plugin for closer inspection.

29th Aug 2008, 3:28 am PDT | RSS 2.0 | Comment | Trackback

Similar Posts

12 Comments

By Raphael Martins at 21 Oct 2008 9:24 pm PDT

Nice work! =)
By Mike B. at 21 Nov 2008 2:46 pm PST

Very nice script – thank you!
By Elle at 17 Jan 2009 1:35 pm PST

Nice script. Could I ask for your help on how to alter the script so it shuffles through an array but only shows just one array item — which would change on page reload?
By caphun at 18 Jan 2009 2:00 am PST

@Elle: Thanks. Yes that’s certainly possible. Try this:

jQuery(function($){
var randomItem = $.shuffle([1,2,3,4,5,6])[0];
alert(randomItem);
});

The above will return a random number between 1 and 6.
By Shuffling the DOM - James Padolsey at 5 Feb 2009 6:56 am PST

[...] was recently looking for a decent way of shuffling a set of elements. I found a jQuery plugin which claimed to do exactly that but unfortunately it only works if all elements are direct [...]
By Implement Array Shuffling in MooTools at 9 Feb 2009 10:01 pm PST

[...] useful function, I recently found myself needing to accomplish the task. I found a great post about how to achieve this feat using jQuery. Here’s how to implement array shuffling in [...]
By Rustam Mester at 28 Apr 2009 2:44 pm PDT

Big thanks to author from russian freelancer !
By Manish MISTRY at 13 May 2009 2:48 pm PDT

Thanks mate!
By Hector Virgen at 7 Jul 2009 5:06 am PDT

Very nice! Just what I was looking for and it seems quick.

But I ran into a small problem — all event bindings will be lost after shuffling. I made a small modification that allows you to keep your bindings by using clone(true):

$.fn.shuffle = function()
{
return this.each(function()
{
var items = $(this).children().clone(true);
return (items.length)
? $(this).html($.shuffle(items))
: this);
});
};
By caphun at 10 Jul 2009 3:07 pm PDT

@hector – makes sense to keep the bindings! I will add that into my code aswell. Thanks!
By Ellison at 24 Dec 2009 1:25 pm PST

Hello. I’ve made an attempt at extending this plugin a little to be able to seed a random number generator so that you can repeat sequences given the right seed. I’m very new at jQuery, so if I didn’t do something quite right (style-wise or other), please tell me

(function($){
var getNextRandom = Math.random;
$.fn.shuffle = function() {
return this.each(function(){
var items = $(this).children().clone(true);
return (items.length) ? $(this).html($.shuffle(items)) : this;
});
}

$.shuffleInit = function(options) {
if(!options || !Random) return;
if(typeof options.seed == “number”) {
var r = new Random(options.seed);
getNextRandom = function() { return r.next(); };
}
}

$.shuffle = function(arr) {
for(var j, x, i = arr.length; i; j = parseInt(getNextRandom() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
return arr;
}

})(jQuery);

It seems to work fine, assuming that you’ve loaded a class called Random that works appropriately (i.e. a 1-arg constructor to initialize the seed and a next() method to get the next pseudo-random number).

Again, I’d much appreciate tips on how I can improve what I was trying to do.
By bamboolabcode at 1 Feb 2010 1:20 pm PST

Thanks for the info. I appreciate it well.