jquery basic：如何隨機化這個數組並仍然調用所有參數？

Question

我有2個divs，#col1和#col2，我需要在那裏生成一些水果名稱的div。

到目前爲止，我有：

var fruitArray = ['apples','banana','orange','grapes']; 
for (fruit in fruitArray) { 
    $('<div class="'+fruitArray[fruit]+'"></div>').appendTo('#col1').doSomething(); 

    $('<div id="'+fruitArray[fruit]+'"></div>').appendTo('#col2').doSomething(); 
} 

果然像：

<div id="#col1"> 
    <div class="apples"></div> 
    <div class="banana"></div> 
    <div class="orange"></div> 
    <div class="grapes"></div> 
</div> 
<div id="#col2"> 
    <div id="apples"></div> 
    <div id="banana"></div> 
    <div id="orange"></div> 
    <div id="grapes"></div> 
</div> 

如何隨機排列，所以它看起來是這樣的：

<div id="#col1"> 
    <div class="orange"></div> 
    <div class="apples"></div> 
    <div class="orange"></div> 
    <div class="grapes"></div> 
</div> 
<div id="#col2"> 
    <div id="grapes"></div> 
    <div id="orange"></div> 
    <div id="apples"></div> 
    <div id="banana"></div> 
</div> 

Answer 1

簡單shuffle擴展：

Array.prototype.shuffle = function() { 
    var shuffledArray = []; 
    while (this.length) { 
     shuffledArray.push(this.splice(Math.random() * this.length, 1)[0]); 
    } 
    while (shuffledArray.length) { 
     this.push(shuffledArray.pop()); 
    } 
    return this; 
} 

使用它像

var fruitArray = ['apples','banana','orange','grapes'].shuffle(); 
for (var i = 0; i < fruitArray.length; i++) {    
    $('<div class="'+fruitArray[i]+'"></div>').appendTo('#col1').doSomething(); 

    $('<div id="'+fruitArray[i]+'"></div>').appendTo('#col2').doSomething(); 
}