Shuffle DOM Elements

Last updated on: January 6, 2010

This is from James Padolsey. Check out his article for a pure JavaScript technique as well.

Plugin

(function($){
 
    $.fn.shuffle = function() {
 
        var allElems = this.get(),
            getRandom = function(max) {
                return Math.floor(Math.random() * max);
            },
            shuffled = $.map(allElems, function(){
                var random = getRandom(allElems.length),
                    randEl = $(allElems[random]).clone(true)[0];
                allElems.splice(random, 1);
                return randEl;
           });
 
        this.each(function(i){
            $(this).replaceWith($(shuffled[i]));
        });
 
        return $(shuffled);
 
    };
 
})(jQuery);

Usage

Target elements, call shuffle.

$('ul#list li').shuffle();

Comments

Vladimir Komarov

# January 7, 2010

Thank you for this post – it’s useful. I’m going to read again jQuery docs about map, get and replaceWith, and about native js splice as well.

Reply ↓

Alexandre Cárdenas

# December 22, 2011

Your web design is awesome. I love it. Congratulations!

Alex

Reply ↓

Kiran

# July 26, 2012

Great piece. Thank You.

Reply ↓

Nitin

# March 26, 2013

Great plugin. Thanks a million.

Reply ↓

Trevor

# March 26, 2013

Anyone have an idea how to make this work if you want to randomize say two different lists on the same page? Yes I could assign a different ID to each list then suffle them like so:

$(‘ul#list1 li’).shuffle();
$(‘ul#list2 li’).shuffle();

But what I’d like to be able to do is just go:
$(‘ul.randlist li’).shuffle();

And that would then randomize just the list items within that UL, even if I had multiple lists on a page. Right now what it does it randomizes all the list items across ALL the ul’s with that class. Which is not what I want as the list items need to stay with their parent.

Reply ↓

Jesse

# May 16, 2013

Trevor, this is simple using each()

$('ul.randlist').each(function(){ $(this).find('li').shuffle() })

Reply ↓

Jesse

# May 17, 2013

Also, I noticed that this plugin will break references to the original elements (since it actually copies them). I wrote a version that actually shuffles the original elements.

“`
(function($){

$.fn.shuffle = function() {

  var elements = this.get()
  var copy = [].concat(elements)
  var shuffled = []
  var placeholders = []

  // Shuffle the element array
  while (copy.length) {
    var rand = Math.floor(Math.random() * copy.length)
    var element = copy.splice(rand,1)[0]
    shuffled.push(element)
  }

  // replace all elements with a plcaceholder
  for (var i = 0; i < elements.length; i++) {
    var placeholder = document.createTextNode('')
    findAndReplace(elements[i], placeholder)
    placeholders.push(placeholder)
  }

  // replace the placeholders with the shuffled elements
  for (var i = 0; i < elements.length; i++) {
    findAndReplace(placeholders[i], shuffled[i])
  }

  return $(shuffled)

}

function findAndReplace(find, replace) {
  find.parentNode.replaceChild(replace, find)
}

})(jQuery)
“`

Reply ↓

Andrew Van Wart

# May 22, 2013

Excellent tip! I would just add that if you have nested list items (ul ul li) within your parent ul#list, in order to only randomize the parent list items, use this code to initialize:

$('ul#list > li').shuffle();

Reply ↓

treehouse : what would you like to learn today?

Snippets

Shuffle DOM Elements

Plugin

Usage

Comments

Leave a Comment