Randomize a sequence of div elements with jQuery

I modified Russ Cam's solution so that the selector is optional, and the function can be called on multiple container elements, while preserving each randomized element's parent.

For example, if I wanted to randomize all LIs within each '.member' div, I could call it like this:

$('.member').randomize('li'); 

I could also do it like this:

$('.member li').randomize(); 

So the two ways to call this are as follows:

$(parent_selector).randomize(child_selector); 

OR

$(child_selector).randomize(); 

Here's the modified code:

$.fn.randomize = function(selector){ (selector ? this.find(selector) : this).parent().each(function(){ $(this).children(selector).sort(function(){ return Math.random() - 0.5; }).detach().appendTo(this); }); return this; }; 

Minified:

$.fn.randomize=function(a){(a?this.find(a):this).parent().each(function(){$(this).children(a).sort(function(){return Math.random()-0.5}).detach().appendTo(this)});return this}; 

Randomization using sort does not always randomize the elements. It is better to use a shuffle method like the one from How can I shuffle an array?

Here's my updated code

(function($) { $.fn.randomize = function(childElem) { function shuffle(o) { for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); return o; }; return this.each(function() { var $this = $(this); var elems = $this.children(childElem); shuffle(elems); $this.detach(childElem); for(var i=0; i < elems.length; i++) { $this.append(elems[i]); } }); } })(jQuery); 

Just in case you are ok with doing it without jquery:

/** @param {HTMLElement} parent */ const shuffleChildren = (parent) => { const cards = [...parent.children]; for (const child of cards) { const newPlace = Math.floor(Math.random() * cards.length); parent.insertBefore(child, cards[newPlace + 1] || null); } }; 

(an answer unrelated to jquery was closed as duplicate of this one, so posting here)

This solution is inspired by the existing solutions, but uses the Fisher-Yates algorithm for sorting.

This ensures that the elements are randomized fairly, which is important for many use cases.

$.fn.randomizeChildrenOrder = function() { this.each(function(){ let childrenArray = $(this).children().toArray(); let shuffledChildrenArray = fisherYatesShuffle(childrenArray); $(shuffledChildrenArray).detach().appendTo(this); }); return this; // https://stackoverflow.com/a/2450976/665825 function fisherYatesShuffle(array){ let currentIndex = array.length, temporaryValue, randomIndex; while (currentIndex !== 0) { randomIndex = Math.floor(Math.random() * currentIndex); currentIndex -= 1; temporaryValue = array[currentIndex]; array[currentIndex] = array[randomIndex]; array[randomIndex] = temporaryValue; } return array; } } 

Usage: call the function on the parent element of the elements you need to shuffle. If the elements share the parent element with elements that need to be left alone, add an extra parent around them, so this is no longer the case.

$('.member ul').randomizeChildrenOrder(); 

Generalized:

$(parentSelector).randomizeChildrenOrder();