如何让孩子订购随机发生器，并选择重置为初始订单？

Question

我有几个div，内容必须经常随机化，并返回到每个div中的常规顺序。

对于每个div，我使用类似下面的函数，每个div使用不同的类，在页面加载时完美地随机化每个div。随机函数效果很好，但我需要知道如何通过单击按钮然后再返回任何随机顺序将每个div恢复到正常顺序，我想可以通过使用jQuery的切换方法来完成。

<script>
$(function () {
    var parent = $(".randomONE");
    var divs = parent.children();
    while (divs.length) {
        parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
    }
});
</script>

编辑：

Andrei Gheorghiu，这是我用来测试你的第一个答案的HTML。它适用于第一个DIV但不适用于第二个DIV。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button onclick="randomizeChildrenONE()">RandomizeONE</button>
<button onclick="resetChildrenONE()">ResetONE</button>
<div class="randomONE">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
    <script type="text/javascript">
        let initialOrder = $('.randomONE').html();
function randomizeChildrenONE() {
  let parent = $(".randomONE"),
      divs = parent.children();
  while (divs.length) {
      parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
  }
}
function resetChildrenONE() {
  $(".randomONE").html(initialOrder)
}
    </script>

<br><br><br>


<button onclick="randomizeChildrenTWO()">RandomizeTWO</button>
<button onclick="resetChildrenTWO()">ResetTWO</button>
<div class="randomTWO">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
    <script type="text/javascript">
        let initialOrder = $('.randomTWO').html();
function randomizeChildrenTWO() {
  let parent = $(".randomTWO"),
      divs = parent.children();
  while (divs.length) {
      parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
  }
}
function resetChildrenTWO() {
  $(".randomTWO").html(initialOrder)
}
    </script>

对不起，我是新手，不知道怎么做得更好。

提前致谢！

Answer 1

这应该做到这一点。

$('.random-container').each((i,elem) => 
  $('.random', elem).children().each((j,child) => 
    $(child).attr('data-order', ++j)
  )
);

$('.randomize-children').on('click tap',  randomizeChildren);
$('.reset-children').on('click tap', resetChildren);

function randomizeChildren() {
  let container = $(this).closest('.random-container'), 
      parent = $(".random", container),
      divs = parent.children();
  while (divs.length) {
      parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
  }
}

function resetChildren() {
  let container = $(this).closest('.random-container'),
  children = $('.random', container).children().sort(
    (a, b) => Number($(a).data('order')) > Number($(b).data('order')) ? 1:-1
  );
  $.each(children, (i,el) => $('.random', container).append(el));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="random-container">
  <button class="randomize-children">Randomize</button>
  <button class="reset-children">Reset</button>
  <div class="random">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
  </div>
</div>

<div class="random-container">
  <button class="randomize-children">Randomize</button>
  <button class="reset-children">Reset</button>
  <div class="random">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
  </div>
</div>


<div class="random-container">
  <button class="randomize-children">Randomize</button>
  <button class="reset-children">Reset</button>
  <div class="random">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
  </div>
</div>