Change DIV order with jquery

Question

I'm working on a client's HTML based site and need to randomly order a set of Divs on refresh of a page. I would normally handle this through PHP and a database call, but it's a static site.

So, I'm wondering if anyone knows how to randomly display a set of div's using jquery?

Here's an example:

<div class="myItems">
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
</div>

and on refresh, it might change to:

<div class="myItems">
     <div class="item">2</div>
     <div class="item">3</div>
     <div class="item">1</div>
</div>

Anyone know how to do that?

possible duplicate of [Randomize a sequence of div elements with jQuery](http://stackoverflow.com/questions/1533910/randomize-a-sequence-of-div-elements-with-jquery) — Matt Ball, Jun 18 '10 at 17:11

score 8 · Answer 1 · answered Jun 18 '10 at 17:30

This willl do it

 function reorder() {
           var grp = $(".myItems").children();
           var cnt = grp.length;

           var temp,x;
           for (var i = 0; i < cnt; i++) {
               temp = grp[i];
             x = Math.floor(Math.random() * cnt);
             grp[i] = grp[x];
             grp[x] = temp;
         }
         $(grp).remove();
         $(".myItems").append($(grp));
       }

score 1 · Accepted Answer · answered Oct 20 '13 at 16:48

1

Actually it's pretty simple:

$(".myItems").html($(".myItems .item").sort(function(){
    return Math.random()-0.5;
}));

That's it! Enjoy.

answered Oct 20 '13 at 16:48

Slavik Meltser

9,712
3
47
48

score 0 · Answer 3 · answered Jun 18 '10 at 19:37

Another simple way is ... 1. create an array 2. generate a random number and check if it is Odd or Even 3. If odd, add your div to the top (shift method). If even, add your div to the bottom (push method). 4. So this way you will have your divs arranged randomly in the array. 5. Now simple join the array and append it to your Page.

var divArray = [];

for(var i=0; i<divs.length; i++){
  //generate random number
  if(rand_num == odd)
     divArray.push( div[i] );
  else
     divArray.shift( div[i] );
}

$(myElem).html( divArray.join("") );

Change DIV order with jquery

3 Answers3

Linked