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 — Matt Ball
– Matt Ball, Commented Jun 18, 2010 at 17:11

josephj1989 · Accepted Answer · 2010-06-18 17:30:30Z

8

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));
       }

answered Jun 18, 2010 at 17:30

josephj1989

9,7299 gold badges50 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Slavik Meltser · Accepted Answer · 2013-10-20 16:48:47Z

1

Actually it's pretty simple:

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

That's it! Enjoy.

answered Oct 20, 2013 at 16:48

Slavik Meltser

10.5k3 gold badges53 silver badges48 bronze badges

Comments

Ashit Vora · Accepted Answer · 2010-06-18 19:37:51Z

0

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("") );

answered Jun 18, 2010 at 19:37

Ashit Vora

2,9222 gold badges29 silver badges41 bronze badges

Collectives™ on Stack Overflow

Change DIV order with jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related