我有 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。
最佳答案
对内容源元素进行随机排序,然后循环显示容器元素并插入具有相同索引的内容
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>
关于Javascript 将来自 5 个来源的内容随机放入 3 个 div,且不重复,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48045430/