In this post, we will see how can we shuffle a div contents using jquery. Here the div contents are another set of divs which contain some values. So what we are going to 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.
Background
Recently I was crating a simple on-line game, in which I was in a need of this requirement. I will share about the game in my next article.
Using the code
The first step you need to do is add reference.
[js]
<script src="jquery-2.0.2.min.js"></script>
[/js]
Next we will add the div and its contents.
[html]
<div id="parent">
<div class="myInnerDiv">1</div>
<div class="myInnerDiv">2</div>
<div class="myInnerDiv">3</div>
<div class="myInnerDiv">4</div>
<div class="myInnerDiv">5</div>
<div class="myInnerDiv">6</div>
<div class="myInnerDiv">7</div>
<div class="myInnerDiv">8</div>
<div class="myInnerDiv">9</div>
<div class="myInnerDiv">10</div>
<div class="myInnerDiv">11</div>
<div class="myInnerDiv">12</div>
<div class="myInnerDiv">13</div>
<div class="myInnerDiv">14</div>
<div class="myInnerDiv">15</div>
<div class="myInnerDiv">16</div>
<div class="myInnerDiv">17</div>
<div class="myInnerDiv">18</div>
<div class="myInnerDiv">19</div>
<div class="myInnerDiv">20</div>
<div class="myInnerDiv">21</div>
<div class="myInnerDiv">22</div>
<div class="myInnerDiv">23</div>
<div class="myInnerDiv">24</div>
<div class="myInnerDiv">25</div>
</div>
[/html]
Can we style those divs now?
[css]
<style>
#parent {
width: 27%;
height: auto;
padding: 10px;
float: left;
margin-left: 5px;
min-height: 265px;
}
.myInnerDiv {
width: 25px;
height: 28px;
padding: 15px;
background-color: green;
margin: 3px;
float: left;
cursor: move;
}
</style>
[/css]
See your page now.
Shuffle div contents
Now we will add a href tag to fire a click event.
[html]
<a href="#" id="shuffle">Shuffle Me</a>
[/html]
Next is writing the needed scripts.
[js]
<script>
$(function () {
$("#shuffle").click(function(){
var maindiv = $("#parent");
var divs = maindiv.children();
while (divs.length) {
maindiv.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
}
});
});
</script>
[/js]
In the above code we are getting the contents from the div parent to a variable maindiv, and we find the children of that div and at last in a while loop we will juse select the divs randomly and append to our main div again.
See the output now.
Output
When you load first time
Shuffle div contents
When you load second time
Shuffle Div Contents
When you load third time
Shuffle Div Contents
Complete Code
[html]
<!DOCTYPE html>
<html>
<head>
<title>Shuffle a div contents – Sibeesh Passion</title>
<script src="jquery-2.0.2.min.js"></script>
<style>
#parent {
width: 27%;
height: auto;
padding: 10px;
float: left;
margin-left: 5px;
min-height: 265px;
}
.myInnerDiv {
width: 25px;
height: 28px;
padding: 15px;
background-color: green;
margin: 3px;
float: left;
cursor: move;
}
</style>
<script>
$(function () {
$("#shuffle").click(function(){
var maindiv = $("#parent");
var divs = maindiv.children();
while (divs.length) {
maindiv.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
}
});
});
</script>
</head>
<body id="body">
<div id="parent">
<div class="myInnerDiv">1</div>
<div class="myInnerDiv">2</div>
<div class="myInnerDiv">3</div>
<div class="myInnerDiv">4</div>
<div class="myInnerDiv">5</div>
<div class="myInnerDiv">6</div>
<div class="myInnerDiv">7</div>
<div class="myInnerDiv">8</div>
<div class="myInnerDiv">9</div>
<div class="myInnerDiv">10</div>
<div class="myInnerDiv">11</div>
<div class="myInnerDiv">12</div>
<div class="myInnerDiv">13</div>
<div class="myInnerDiv">14</div>
<div class="myInnerDiv">15</div>
<div class="myInnerDiv">16</div>
<div class="myInnerDiv">17</div>
<div class="myInnerDiv">18</div>
<div class="myInnerDiv">19</div>
<div class="myInnerDiv">20</div>
<div class="myInnerDiv">21</div>
<div class="myInnerDiv">22</div>
<div class="myInnerDiv">23</div>
<div class="myInnerDiv">24</div>
<div class="myInnerDiv">25</div>
</div>
<a href="#" id="shuffle">Shuffle Me</a>
</body>
</html>
[/html]
Conclusion
I hope you liked this article. Please share me your valuable feedback and suggestions. Thanks in advance.
Kindest Regards
Sibeesh Venu