Shuffle jQuery selection

Question

I'm trying to shuffle the order of a jQuery selection without shuffle the elements in the DOM.

I need to shuffle the selection to add a class to each element in random order, this is how my code should look:

$(".item").shuffle().each(function (i, element) {
    $(element).delay(i * 100).queue(function (next) {
        $(this).addClass("shown");
        next();
    });
});

Can someone help me finding the shuffle() function I need?

it looks like you are trying to shuffle the order of some list elemets. google search for 'suffle unordered list' http://stackoverflow.com/questions/14555415/jquery-how-to-random-sort-list-items — superUntitled, Jul 18 '14 at 18:48

score 6 · Accepted Answer · edited May 23 '17 at 12:16

6

I borrowed the Array.shuffle method from this answer, and made it into a jQuery plugin

$.fn.shuffle = function(){
    for(var j, x, i = this.length; i; j = Math.floor(Math.random() * i), x = this[--i], this[i] = this[j], this[j] = x);
    return this;
};

FIDDLE

edited May 23 '17 at 12:16

Community

1
1

answered Jul 18 '14 at 18:48

adeneo

312,895
29
395
388

I don't think an array shuffle will do it, it looks like the shuffle will be done on html elements. – superUntitled Jul 18 '14 at 18:50
1

@superUntitled - and that's why I modified it to work on a jQuery collection – adeneo Jul 18 '14 at 18:51

score 0 · Answer 2 · answered Jul 18 '14 at 19:18

$.fn.shuffle = function () {
    'use strict';
    var self = this,
        i,
        rnd,
        len = self.length - 1;
    for (i = len; i > 0; i -= 1) {
        rnd = Math.floor(Math.random() * len) % i;
        [self[i], self[rnd]] = [self[rnd], self[i]];
    }
    return self;
}

Shuffle jQuery selection

2 Answers2