javascript - 打乱所有具有相同类别的标签

Question

如何打乱具有相同类别的标签？这是我想做的一个例子

<div>
A. <label class="shuffle">1</label>
B. <label class="shuffle">2</label>
C. <label class="shuffle">3</label>
</div>

A. 1
B. 2
C. 3

这将是我的预期输出。

A. 3
B. 1
C. 2

我一直在尝试THIS解决方案，但似乎在随机播放时它会附加在底部。

Answer 1

最简单的方法是打乱文本字符串数组并替换每个文本字符串中的文本

这可以避免尝试交换元素，因为您还有其他文本节点与每个元素内联，并且希望这些文本节点保持在原位。

var $labels = $('.shuffle'),
  // map text of each to array
  textArr = $labels.map(function(_, el) {
    return $(el).text()
  }).get()
  // random sort text array
  .sort(function() {
    return Math.random() - .5;
  });
  // set new text using matching index in sorted text array
  $labels.text(function(i){
     return textArr[i];
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
A. <label class="shuffle">1</label>
B. <label class="shuffle">2</label>
C. <label class="shuffle">3</label>
</div>