5つのソースから3つのdivへのJavascriptのランダムコンテンツ

Question

私は3つのコンテナdivと5つのコンテンツdivを持っています。ページが読み込まれるたびに、1つのコンテンツdivを3つのコンテナdivにランダムに挿入し、コンテンツdivを複製することなく（それぞれのコンテナdivには一意のcontent 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>