javascript - ページが更新されるたびにランダムな順序で表示

Question

ページが更新されるたびにこの表示をランダムな順序で行うにはどうすればよいですか。

ここで私は自分のワードプレスのテキストエディタに追加したものですが、画像は完璧に表示されますが、divの順番はランダム化されません。私は何を間違えたのですか？

<br><br> 
<div class="quiz"> 
<a href="http://www.thequizmania.com/we-bet-you-cant-pass-this-tricky-general-knowledge-quiz/"> 
<img src="http://i.imgur.com/3YcBoyN.jpg"></img> 
<a> 
</div> 

<br> 
<div class="quiz"> 
<a href="http://www.thequizmania.com/what-kind-of-traveler-are-you/"> 
<img src="http://i.imgur.com/GZn9myC.jpg"></img> 
<a> 
</div> 

<br> 
<div class="quiz"> 
<a href="http://www.thequizmania.com/what-two-words-describe-you-as-a-mother/"> 
<img src="http://i.imgur.com/QnJezBF.jpg"></img> 
<a> 
</div> 

<br> 
<div class="quiz"> 
<a href="http://www.thequizmania.com/can-you-pick-the-correct-word/"> 
<img src="http://i.imgur.com/Pdi9dyo.jpg"></img> 
<a> 
</div> 

<br> 
<div class="quiz"> 
<a href="http://www.thequizmania.com/can-you-pass-this-almost-impossible-shapes-test/"> 
<img src="http://i.imgur.com/Ov5WdOg.jpg"></img> 
<a> 
</div> 

<br> 

<script> 
var cards = $(".quiz"); 
for(var i = 0; i < cards.length; i++){ 
    var target = Math.floor(Math.random() * cards.length -1) + 1; 
    var target2 = Math.floor(Math.random() * cards.length -1) +1; 
    cards.eq(target).before(cards.eq(target2)); 
} 
</script> 

Answer 1

あなたのコードは正常に動作します。 私はちょうど：

1. 固定<a>タグ
2. を追加しましたjQueryライブラリ

Here your code on Jsfiddle

Answer 2

Math.randomでランダム化できます。

var divContents = ['<br><div class="quiz"><a href="http://www.thequizmania.com/can-you-pass-this-almost-impossible-shapes-test/"><img src="http://i.imgur.com/Ov5WdOg.jpg"></a></div>', 'second', 'thrid', '4th', '5th', '6th']; 
 
    var len = divContents.length; 
 
    var parent = document.getElementById('parent'); 
 
    
 
    for(i=0;i<len;i++) { 
 
    var random = Math.floor(Math.random()*(divContents.length)); 
 
    parent.innerHTML += (divContents[random]); 
 
    divContents.splice(random, 1); 
 
    }

<div id="parent"> 
 

 
</div>