jQuery basic: How to create a loop with this structure?
<p>This is a really simple question but I'm not sure how to search for it on the internet. </p>

<p>I have an empty <code>&lt;div id="wrap"&gt;&lt;/div&gt;</code> that needs to end up looking as following:</p>

<pre><code>&lt;div id="wrap&gt;
    &lt;div class="container"&gt;
        &lt;div class="apples"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="container"&gt;
        &lt;div class="banana"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="container"&gt;
        &lt;div class="orange"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="container"&gt;
        &lt;div class="grapes"&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>In jquery I have:</p>

<pre><code>$(#wrap).html(''); // need this bit
var fruitArray = ['apples','banana','orange','grapes'];
for (fruit in fruitArray) {
    $('&lt;div class="'+fruitArray[fruit]+'"&gt;&lt;/div&gt;').appendTo('#wrap').doSomething(); 
}
</code></pre>

<p>Because I need the div with the fruitArray class to do something, I can't just wrap it around with the container class: </p>

<pre><code>$('&lt;div class="container"&gt;&lt;div class="'+fruitArray[fruit]+'"&gt;&lt;/div&gt;&lt;/div&gt;').appendTo...
</code></pre>

<p>How can I go about generating the container class in this situation?</p>
