jQuery output array in random order

Share this article

Just some sharing of some jQuery snippets to display/sort things in random order.

Sort Code Snippets

Use this function in object literal format.
shuffleAds: 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;
}
View Demo Another function to do the same thing.
function randsort(c) {
    var o = new Array();
    for (var i = 0; i < c; i++) {
        var n = Math.floor(Math.random()*c);
        if( jQuery.inArray(n, o) > 0 ) --i;
        else o.push(n);
    }
    return o;
}
Also thought this jQuery Shuffle plugin was worth including.
/*
 * jQuery shuffle
 *
 * Copyright (c) 2008 Ca-Phun Ung 
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 *
 * http://yelotofu.com/labs/jquery/snippets/shuffle/
 *
 * Shuffles an array or the children of a element container.
 * This uses the Fisher-Yates shuffle algorithm 
 */

(function($){

    $.fn.shuffle = function() {
        return this.each(function(){
            var items = $(this).children().clone(true);
            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);

Frequently Asked Questions (FAQs) about jQuery Output Array in Random Order

How can I shuffle an array in JavaScript without using jQuery?

Shuffling an array in JavaScript without using jQuery can be done using the Fisher-Yates (also known as Knuth) shuffle algorithm. This algorithm works by iterating through the array from the last element to the first, swapping each element with an element at a random index less than or equal to the current index. Here’s a simple implementation:

function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}

Can I use the .sort() method to randomize an array in JavaScript?

While it’s technically possible to use the .sort() method to randomize an array in JavaScript, it’s not recommended. The .sort() method is not designed to produce random orderings, and using it in this way can lead to biased results. The Fisher-Yates shuffle algorithm is a better choice for this task.

How can I randomize the order of div elements with jQuery?

You can randomize the order of div elements with jQuery using the .get() method to convert the jQuery object into an array, then shuffling that array and appending the elements back to the parent element. Here’s an example:

var parent = $("#parent");
var divs = parent.children();
divs.sort(function(){ return Math.random() - 0.5; });
divs.detach().appendTo(parent);

What is the time complexity of the Fisher-Yates shuffle algorithm?

The Fisher-Yates shuffle algorithm has a time complexity of O(n), where n is the number of elements in the array. This makes it an efficient choice for shuffling large arrays.

Can I use the Fisher-Yates shuffle algorithm to shuffle an array of objects?

Yes, the Fisher-Yates shuffle algorithm can be used to shuffle an array of any type of elements, including objects. The algorithm treats each element as a single unit, regardless of what data it contains.

How can I shuffle an array in jQuery?

jQuery doesn’t have a built-in method for shuffling arrays, but you can use JavaScript’s Fisher-Yates shuffle algorithm in combination with jQuery. Here’s an example:

$.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);
};

Is there a way to shuffle an array in JavaScript without modifying the original array?

Yes, you can create a copy of the array and shuffle the copy. This can be done using the .slice() method to create the copy, and then applying the Fisher-Yates shuffle algorithm to the copy.

Can I shuffle a string in JavaScript?

Yes, you can shuffle a string in JavaScript by converting the string to an array of characters, shuffling the array, and then joining the array back into a string. Here’s an example:

function shuffleString(string) {
var array = string.split('');
shuffleArray(array);
return array.join('');
}

How can I shuffle an array in a specific order?

Shuffling an array in a specific order is a contradiction in terms, as shuffling implies a random order. If you need to arrange an array in a specific, non-random order, you’ll need to use a sorting algorithm, not a shuffling algorithm.

Can I use the Fisher-Yates shuffle algorithm to shuffle a list in jQuery?

Yes, you can use the Fisher-Yates shuffle algorithm to shuffle a list in jQuery. You can convert the list items to an array using the .get() method, shuffle the array, and then append the items back to the list.

Sam DeeringSam Deering
View Author

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

jQuery
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form