Swapping Divs by their class

Question

I've seen a lot of questions similar to this but none that I could find address this specific problem or so I think.

I have a page built in this format that controls the concent of a dynamic part of a webpage, What i want it to do is with randomly based on the div with the "switchme" class. so basically I want everything to swap around without having the content inside the "switchme" change, just its place in the page. Ive tried numerous javascript and jquery scripts but in the end it always ends up moving around the interal divs

<div class= "switchme_container">
<div class = "switchme">
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
</div>
<div class = "switchme">
<div>Content</div>
<div></div>
<div></div>
<div></div>
</div>
<div class = "switchme">
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
</div>
</div>

<script>
function shuffle(sj) {              
var replace = $('<div>');
var size = sj.size();

while (size >= 1) {
   var randomize = Math.floor(Math.random() * size);
   var tempdiv = sj.get(randomize);      
   replace.append(tempdiv);        
   sj = sj.not(tempdiv); 

}
$('#switchme_container').html(replace.html() );   
</script>

thats just one of many, ive also tried messing with the tags so their is only one div, but that really kills the styles i have — user1902540, Dec 27 '12 at 18:37
I'm not sure "swapping" is actually what you intend... could you clarify a bit? Do you want to copy the contents of a random switchme into the "replace" div? — Brilliand, Dec 27 '12 at 18:43
each switch me is a slide in a banner, the first being the one that appears first, and i need them a random one to start not just the first each time — user1902540, Dec 27 '12 at 18:46
Did you want something like this? http://jsfiddle.net/Morlock0821/D2jxe/1/ — Pedro Estrada, Dec 27 '12 at 18:48
You don't appear to be setting `size` within the loop... does that loop actually terminate? — Brilliand, Dec 27 '12 at 18:48
@pedroestrada yeah soomething that on load keeps them all together but shuffles — user1902540, Dec 27 '12 at 18:51

score 1 · Accepted Answer · edited May 23 '17 at 11:48

You can copy the switchme elements into an array, shuffle them in a more obvious way, then push them back into the switchme_container element:

var shuffle = function(o){ //v1.0
    for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};
$(".switchme_container").append(shuffle($.makeArray($(".switchme"))));

jsFiddle: http://jsfiddle.net/D2jxe/2/

jQuery automatically moves each element instead of copying it, unless you explicitly clone it before inserting it.

Shuffle function copied from here: How can I shuffle an array?

machineghost · Answer 2 · 2012-12-27T18:56:43.737

0

The general formula for moving something is pretty simple:

 $newParent.append($thingToMove);

(NOTE: If you want to ditch the events handlers/data on $thingToMove you can call .remove() on it first.)

If that isn't working for you, you have a debugging problem to solve, but that should generally work.

edited Dec 27 '12 at 18:56

answered Dec 27 '12 at 18:40

machineghost

33,529
30
159
234

2

You don't even need `.remove()`. In fact, `.remove()` removes event handlers and data. – pimvdb Dec 27 '12 at 18:44
Excellent point; I wasn't sure if remove was needed or not (and figured "it never hurts to clean up"); I'll edit my answer. – machineghost Dec 27 '12 at 18:56

score 0 · Answer 3 · answered Dec 27 '12 at 18:54

I've attached the randomize event to a button click, answer embedded within the comments of the following code:

$('#randomize').click(function(ev){
    ev.preventDefault();

    var $sc = $('.switchme_container'),
        contentHolder = [],
        randomIndex;

    // detach .switchme elements from page and add to contentHolder array
    $sc.find('.switchme').each(function(i, el){
        contentHolder.push($(this).detach());
    });

    while (contentHolder.length) {

        // pick a random index of the contentHolder array
        randomIndex = Math.floor(Math.random() * contentHolder.length);

        // append it to the container
        $sc.append(contentHolder[randomIndex]);

        // slice that element out of the contentHolder array
        contentHolder = contentHolder.slice(0, randomIndex)
            .concat(contentHolder.slice(randomIndex + 1, contentHolder.length));
    }
});

Swapping Divs by their class

3 Answers3

See Demo