Jquery shuffling – Sibeesh Passion https://sibeeshpassion.com My passion towards life Mon, 17 Aug 2015 08:05:35 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 /wp-content/uploads/2017/04/Sibeesh_Passion_Logo_Small.png Jquery shuffling – Sibeesh Passion https://sibeeshpassion.com 32 32 Shuffle Div Contents https://sibeeshpassion.com/shuffle-div-contents/ https://sibeeshpassion.com/shuffle-div-contents/#disqus_thread Mon, 17 Aug 2015 08:02:51 +0000 http://sibeecst_passion.com/?p=9621 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

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

Shuffle div contents

When you load second time

Shuffle Div Contents

Shuffle Div Contents

When you load third time

Shuffle Div Contents

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

]]> https://sibeeshpassion.com/shuffle-div-contents/feed/ 0