javascript - 如何使 child 订单随机化器具有重置回初始订单的选项？

Question

我有几个 div，这些 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，但不适用于第二个。

    <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>