Question

I’m a little frustrated over how to shuffle elements (because I have data stored in them, simply changing the text will not suffice). I’m trying to shuffle sibling elements so I should use .before and .after. This is my current code

function shuffle() {
    var children = $("#paren").children();
    randIndex = randomFromTo(0, arr.length - 1);

    for(i = 0; i < children.length; i++) {
        //But obviously I can't retrieve a specific child like this
        $("#parent nth-child("+randIndex+")").before(children.i);
    }
}
function randomFromTo(from, to){
    return Math.floor(Math.random() * (to - from + 1) + from);
}

Answer 1

Grab the children as array, shuffle it and append them again. Since they are the same references, appending will actually move them.

var parent = $('ul');

var children = parent.children().get().sort(function() {
    return Math.random() - 0.5;
});

parent.append(children);

https://tinker.io/54968