How to change order of elements in html using javascript

Question

I am creating a simple game that has 9 divisions and each 8 of the divisions have a penguin hidden in them and the 9th one has a monster. Now my game works fine but what I want to do is every time I load the page, arrangement of the divisions should change so as to add randomness to the game.

Here is my code:

$(document).ready(function() {
  //This code will run after your page loads
  $('body').on('mousedown', '.yeti', function(event) {
    alert("Yaaaarrrr!");
  });
});

<div class="gameholder">
  <div class="title"></div>
  <div class="penguin1"></div>
  <div class="penguin2"></div>
  <div class="penguin3"></div>
  <div class="penguin4"></div>
  <div class="penguin5"></div>
  <div class="penguin6"></div>
  <div class="penguin7"></div>
  <div class="penguin8"></div>
  <div class="yeti"></div>
</div>

After adding images and some positioning to the div's this is how it looks

Remove the divs from the DOM and then add them back in random order. It would probably help if you arranged it so they weren't siblings of .title or else make it easier to select them without .title — Matt Burland
– Matt Burland, Commented May 31, 2016 at 14:41
The following might be of help: stackoverflow.com/questions/1533910/… — David Wilkinson
– David Wilkinson, Commented May 31, 2016 at 14:46

Community · Accepted Answer · 2017-05-23 12:32:31Z

5

Keeping Your Animals Contained

Consider creating a container for all of your game elements as you only want to randomize their order as you don't want to get the title mixed up in all of this :

<div class='game-container'>
    <div class="penguin1"></div>
    <div class="penguin2"></div>
    <div class="penguin3"></div>
    <div class="penguin4"></div>
    <div class="penguin5"></div>
    <div class="penguin6"></div>
    <div class="penguin7"></div>
    <div class="penguin8"></div>
    <div class="yeti">
</div>

Shuffling Them Around

This should make them easier to randomize through a simple jQuery extension function like this one mentioned in this related thread :

$.fn.randomize = function(selector){
    (selector ? this.find(selector) : this).parent().each(function(){
        $(this).children(selector).sort(function(){
            return Math.random() - 0.5;
        }).detach().appendTo(this);
    });
    return this;
};

You can combine these two approaches by then simply calling the following when your page has loaded :

$(document).ready(function(){
    // Define your randomize function here

    // Randomize all of the elements in your container
    $('.game-container').randomize('div');
});

Example

$.fn.randomize = function(selector){
    (selector ? this.find(selector) : this).parent().each(function(){
        $(this).children(selector).sort(function(){
            return Math.random() - 0.5;
        }).detach().appendTo(this);
    });

    return this;
};
// Randomize all of the <div> elements in your container
$(".game-container").randomize('div');

.game-container { width: 300px; }

.penguin { background: url('http://vignette1.wikia.nocookie.net/farmville/images/b/be/Baby_Penguin-icon.png/revision/latest?cb=20110103080900'); height: 100px; width: 100px; display: inline-block; }
.yeti { background: url('http://www.badeggsonline.com/beo2-forum/images/avatars/Yeti.png?dateline=1401638613'); height: 100px; width: 100px; display: inline-block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class='game-container'>
  <div class='penguin'></div>
  <div class='penguin'></div>
  <div class='penguin'></div>
  <div class='penguin'></div>
  <div class='penguin'></div>
  <div class='penguin'></div>
  <div class='penguin'></div>
  <div class='yeti'></div>
  <div class='penguin'></div>
</div>

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered May 31, 2016 at 14:53

Rion Williams

76.9k38 gold badges206 silver badges335 bronze badges

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

3 Comments

Ankur Chavda Over a year ago

Excellent :) . However, I'm a little new to javascript and jquery. Could you please explain what the randomize function is doing?

Rion Williams Over a year ago

Sure. You can see an annotated example of the function here, which hopefully helps clear things up a bit.

Ankur Chavda Over a year ago

Can you please explain why do we need to write this.something? What does 'this' mean? And as you annotated " This will attempt to find a selector if one exists (this.find(selector)) or it will use the current object (this) ", what is the current object?

Parag Bhayani · Accepted Answer · 2016-06-01 06:41:53Z

0

<body>
    <div class="gameholder">
        <div class="title"></div>
        <div class="penguin1"></div>
        <div class="penguin2"></div>
        <div class="penguin3"></div>
        <div class="penguin4"></div>
        <div class="penguin5"></div>
        <div class="penguin6"></div>
        <div class="penguin7"></div>
        <div class="penguin8"></div>
        <div class="yeti"></div>
    </div>
    <script type="text/javascript">
    $(document).ready( function() {
    $('.gameholder div').shuffle();

   /*
   * Shuffle jQuery array of elements - see Fisher-Yates algorithm
   */
   jQuery.fn.shuffle = function () {
        var j;
        for (var i = 0; i < this.length; i++) {
            j = Math.floor(Math.random() * this.length);
            $(this[i]).before($(this[j]));
        }
        return this;
    };

    //This code will run after your page loads
    $('body').on('mousedown', '.yeti', function(event) {

        alert("Yaaaarrrr!");

    });
});
</script>

Here you would like to know what this 2 line of code is doing ->

j = Math.floor(Math.random() * this.length); // (1)
$(this[i]).before($(this[j])); // (2)

Here in line 1 first I am getting random number using Math.random, Math.random gives you floating number ranging from zero to one. so here I am multiplying that number with length, so it gives me random floating number from zero to length, now I am flooring this number to integer, to get integer from zero to length - 1
If we have a selector $('#b').before('#a') then it puts #a element before #b element, so here we are getting one by one element and putting them in the random order.

edited Jun 1, 2016 at 6:41

answered May 31, 2016 at 14:55

Parag Bhayani

3,3302 gold badges32 silver badges53 bronze badges

2 Comments

Ankur Chavda Over a year ago

how does this.length evaluate? I am a little new to jquery and ' $(this[i]).before($(this[j])); ' too

Parag Bhayani Over a year ago

@ankurchavda: I have updated the answer, see bottom part of my answer

Collectives™ on Stack Overflow

How to change order of elements in html using javascript

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related