Question

I have 2 divs, #col1 and #col2, that I need to generate some divs with fruit names in there.

So far I have:

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(); 
}

Which turns out like:

<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>

How do I randomize the array so it looks something like:

<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

Simple shuffle extension:

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;
}

Use it like

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(); 
}