In this article, we will see how to shuffle div contents using jQuery. Here the div contents are another set of divs that contain some values. So what we will do is, we will add an href and in the click event we will shuffle the entire contents of our main div. I hope you will like this.

Please see this article in my blog.

Background

Recently, I was creating a simple online game for which I needed this. I will share the game in my next article.

Using the code

The first step you need to do is add the reference.

  1. <script src="jquery-2.0.2.min.js"></script>
Next we will add the div and its contents.
  1. <div id="parent">
  2. <div class="myInnerDiv">1</div>
  3. <div class="myInnerDiv">2</div>
  4. <div class="myInnerDiv">3</div>
  5. <div class="myInnerDiv">4</div>
  6. <div class="myInnerDiv">5</div>
  7. <div class="myInnerDiv">6</div>
  8. <div class="myInnerDiv">7</div>
  9. <div class="myInnerDiv">8</div>
  10. <div class="myInnerDiv">9</div>
  11. <div class="myInnerDiv">10</div>
  12. <div class="myInnerDiv">11</div>
  13. <div class="myInnerDiv">12</div>
  14. <div class="myInnerDiv">13</div>
  15. <div class="myInnerDiv">14</div>
  16. <div class="myInnerDiv">15</div>
  17. <div class="myInnerDiv">16</div>
  18. <div class="myInnerDiv">17</div>
  19. <div class="myInnerDiv">18</div>
  20. <div class="myInnerDiv">19</div>
  21. <div class="myInnerDiv">20</div>
  22. <div class="myInnerDiv">21</div>
  23. <div class="myInnerDiv">22</div>
  24. <div class="myInnerDiv">23</div>
  25. <div class="myInnerDiv">24</div>
  26. <div class="myInnerDiv">25</div>
  27. </div>

Can we style those divs now?

  1. <style>
  2. #parent {
  3. width: 27%;
  4. height: auto;
  5. padding: 10px;
  6. float: left;
  7. margin-left: 5px;
  8. min-height: 265px;
  9. }
  10. .myInnerDiv {
  11. width: 25px;
  12. height: 28px;
  13. padding: 15px;
  14. background-color: green;
  15. margin: 3px;
  16. float: left;
  17. cursor: move;
  18. }
  19. </style>

See your page now.

Shuffle div contents
Shuffle div contents.

Now we will add an href tag to fire a click event.

  1. <a href="#" id="shuffle">Shuffle Me</a>

Next is writing the necessary scripts.

  1. <script>
  2. $(function () {
  3. $("#shuffle").click(function(){
  4. var maindiv = $("#parent");
  5. var divs = maindiv.children();
  6. while (divs.length) {
  7. maindiv.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
  8. }
  9. });
  10. });
  11. </script>

In the preceding code we are getting the contents from the div parent to a variable maindiv and we find the children of that div and finally in a while loop we will select the divs randomly and append to our main div again.

See the output now.

Output

When you load the first time.

Shuffle div contents
Shuffle div contents.

When you load the second time.
Shuffle Div Contents
Shuffle Div Contents.

When you load the third time.
Shuffle Div Contents
Shuffle Div Contents

Complete Code

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Shuffle a div contents - Sibeesh Passion</title>
  5. <script src="jquery-2.0.2.min.js"></script>
  6. <style>
  7. #parent {
  8. width: 27%;
  9. height: auto;
  10. padding: 10px;
  11. float: left;
  12. margin-left: 5px;
  13. min-height: 265px;
  14. }
  15. .myInnerDiv {
  16. width: 25px;
  17. height: 28px;
  18. padding: 15px;
  19. background-color: green;
  20. margin: 3px;
  21. float: left;
  22. cursor: move;
  23. }
  24. </style>
  25. <script>
  26. $(function () {
  27. $("#shuffle").click(function(){
  28. var maindiv = $("#parent");
  29. var divs = maindiv.children();
  30. while (divs.length) {
  31. maindiv.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
  32. }
  33. });
  34. });
  35. </script>
  36. </head>
  37. <body id="body">
  38. <div id="parent">
  39. <div class="myInnerDiv">1</div>
  40. <div class="myInnerDiv">2</div>
  41. <div class="myInnerDiv">3</div>
  42. <div class="myInnerDiv">4</div>
  43. <div class="myInnerDiv">5</div>
  44. <div class="myInnerDiv">6</div>
  45. <div class="myInnerDiv">7</div>
  46. <div class="myInnerDiv">8</div>
  47. <div class="myInnerDiv">9</div>
  48. <div class="myInnerDiv">10</div>
  49. <div class="myInnerDiv">11</div>
  50. <div class="myInnerDiv">12</div>
  51. <div class="myInnerDiv">13</div>
  52. <div class="myInnerDiv">14</div>
  53. <div class="myInnerDiv">15</div>
  54. <div class="myInnerDiv">16</div>
  55. <div class="myInnerDiv">17</div>
  56. <div class="myInnerDiv">18</div>
  57. <div class="myInnerDiv">19</div>
  58. <div class="myInnerDiv">20</div>
  59. <div class="myInnerDiv">21</div>
  60. <div class="myInnerDiv">22</div>
  61. <div class="myInnerDiv">23</div>
  62. <div class="myInnerDiv">24</div>
  63. <div class="myInnerDiv">25</div>
  64. </div>
  65. <a href="#" id="shuffle">Shuffle Me</a>
  66. </body>
  67. </html>
Conclusion

I hope you liked this article. Please share with me your valuable feedback and suggestions. Thanks in advance.