Javascript 将来自 5 个来源的内容随机放入 3 个 div，且不重复

Question

我有 3 个容器 div 和 5 个内容 div。每次加载页面时，我想在 3 个容器 div 中的每一个中随机插入一个内容 div，而不复制任何内容 div(每个容器 div 需要有一个唯一的内容 div)。

<!--Container Divs-->
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>

<!--Content Divs-->
<div style="display:none">
 <div class="source one">Contents of source 1</div>
 <div class="source two">Contents of source 2</div>
 <div class="source three">Contents of source 3</div>
 <div class="source four">Contents of source 4</div>
 <div class="source five">Contents of source 5</div>
</div>

我正在使用 WordPress，因此 jQuery 已经加载(如果这样更容易的话)。谢谢您的帮助。我认为在 javascript 例程选择一个尚未选择的随机 div 后，它将涉及一个appendHTML。

Answer 1

对内容源元素进行随机排序，然后循环显示容器元素并插入具有相同索引的内容

var $content = $('.source').sort(function() {
  return Math.random() - .5;
})

$('#one, #two, #three').append(function(i) {
  return $content[i];
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Container Divs-->
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>

<!--Content Divs-->
<div style="display:none">
  <div class="source one">Contents of source 1</div>
  <div class="source two">Contents of source 2</div>
  <div class="source three">Contents of source 3</div>
  <div class="source four">Contents of source 4</div>
  <div class="source five">Contents of source 5</div>
</div>