7

What I need done is: Original State:

<div class="shuffledv">
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
</div>
<div class="shuffledv">
<div id="4"></div>
<div id="5"></div>
<div id="6"></div>
</div>

After Shuffle:

<div class="shuffledv">
<div id="2"></div>
<div id="3"></div>
<div id="1"></div>
</div>
<div class="shuffledv">
<div id="5"></div>
<div id="4"></div>
<div id="6"></div>
</div>

The Divs within the first div stay there but get shuffled, and the same happens for the second div with the same class. To shuffle divs inside a specific div I use something like this:

function shuffle(e) {               // pass divs inside #parent to the function
            var replace = $('<div>');
            var size = e.size();

            while (size >= 1) {
                var rand = Math.floor(Math.random() * size);
                var temp = e.get(rand);      // grab a random div from #parent
                replace.append(temp);        // add the selected div to new container
                e = e.not(temp); // remove our selected div from #parent
                size--;
            }
            $('#parent').html(replace.html()); // add shuffled divs to #parent
}

Called lie this: shuffle('#parent .divclass') Where all Divs with class divclass are inside #parent I think it should start out something like

function shuffle() {        
            $(".shuffledv").each(function() {

and then do some form of the original function, but I've just gotten completely lost at this point. I have no idea how to go forward from here. Please let me know if you need anymore info.

Atom Vayalinkal
  • 2,642
  • 7
  • 29
  • 37

2 Answers2

12

Take a look at this jsfiddle. Essentially what we do is for each of the container shuffledv divs we find all children divs and store them in a list, then we remove them from the DOM, e.g.:

$(".shuffledv").each(function(){
        var divs = $(this).find('div');
        for(var i = 0; i < divs.length; i++) $(divs[i]).remove();

Then I grabbed the Fisher-Yates shuffling algorithm from here to randomise the list of our divs, and finally we append them back to the parent container, like this:

for(var i = 0; i < divs.length; i++) $(divs[i]).appendTo(this);

Hope this helps!

Community
  • 1
  • 1
kieran
  • 1,537
  • 10
  • 10
  • this is not the most effective solution. for example if your divs contain many iframes, this will make the browser reloads all the iframes, should find a way to shuffle them without removing/appending. – Luvias Mar 04 '18 at 13:24
3

Gave this an initial run through:

(function () {
    "use strict";
    // Cycle over each .shuffledv HTMLElement
    $(".shuffledv").each(function () {
        // Remove all divs within, store in $d
        var $d = $(this).find("div").remove();
        // Sort $d randomnly
        $d.sort(function () { return Math.floor(Math.random() * $d.length); });
        // Append divs within $d to .shuffledv again
        $d.appendTo(this);
    });
}());

Demo: http://jsfiddle.net/uYyAH/2/

Sampson
  • 265,109
  • 74
  • 539
  • 565