How to shuffle sibling divs but keep the child elements the same order

Question

How do I randomly rearrange the order of div classes shuffledv but keep the id's in the same order every time I refresh the page?

<div class="shuffledv">
<div id="2"></div>
<div id="3"></div>
<div id="1"></div>
</div>
<div class="shuffledv">
<div id="5"></div>
<div id="4"></div>
<div id="6"></div>
</div>
<div class="shuffledv">
<div id="9"></div>
<div id="8"></div>
<div id="7"></div>
</div>
<div class="shuffledv">
<div id="10"></div>
<div id="11"></div>
<div id="12"></div>
</div>

What do you mean by shuffle? and what is the expected output? — brk, Apr 06 '16 at 15:29
Also, you shouldn't repeat the div id within the DOM (Document Object Model) (resulting HTML). — chriswirz, Apr 06 '16 at 15:31
You can use jQuery to move the outer `div`s around as much as you like. Their children will always be moved with them. — Alex Logan, Apr 06 '16 at 15:33

score 1 · Accepted Answer · answered Apr 06 '16 at 15:42

I think this is what you're looking for:

elems = $('.shuffledv');

elems = shuffle(elems); //shuffle all the elements.


for (i = 0; i < elems.length; i++) {

  $(elems[i]).appendTo($('.container')); //reinsert.
}

function shuffle(array) { //From COOLAJ86 at http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
  var currentIndex = array.length,
    temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">


  <div class="shuffledv">
    first
    <div id="2"></div>
    <div id="3"></div>
    <div id="1"></div>
  </div>

  <div class="shuffledv">
    second
    <div id="5"></div>
    <div id="4"></div>
    <div id="6"></div>
  </div>
  <div class="shuffledv">
    third
    <div id="2"></div>
    <div id="3"></div>
    <div id="1"></div>
  </div>
  <div class="shuffledv">
    fourth
    <div id="5"></div>
    <div id="4"></div>
    <div id="6"></div>
  </div>
</div>

it will shuffle them around everytime it's run. It's best done if they have a container.

How to shuffle sibling divs but keep the child elements the same order

1 Answers1