중복되지 않은 5 개의 소스에서 3 개의 div 로의 자바 무작위 콘텐츠

Question

3 개의 컨테이너 div와 5 개의 콘텐츠 div가 있습니다. 페이지가로드 될 때마다 콘텐츠 div (각 컨테이너 div에는 고유 한 콘텐츠 div가 있어야 함)를 복제하지 않고 하나의 콘텐츠 div를 3 개의 컨테이너 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가 이미로드되어 있으므로 쉽게로드 할 수 있습니다. 도와 주셔서 감사합니다. 난 자바 스크립트 루틴을 선택하지 않은 임의의 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>