javascript - 如何洗牌兄弟 div 但保持子元素相同的顺序

Question

<分区>

Answer 1

我想这就是您要找的:

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>

它会在每次运行时随机播放它们。如果他们有容器，最好这样做。