Question

This is a really simple question but I’m not sure how to search for it on the internet.

I have an empty <div id="wrap"></div> that needs to end up looking as following:

<div id="wrap>
    <div class="container">
        <div class="apples"></div>
    </div>
    <div class="container">
        <div class="banana"></div>
    </div>
    <div class="container">
        <div class="orange"></div>
    </div>
    <div class="container">
        <div class="grapes"></div>
    </div>
</div>

In jquery I have:

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

Because I need the div with the fruitArray class to do something, I can’t just wrap it around with the container class:

$('<div class="container"><div class="'+fruitArray[fruit]+'"></div></div>').appendTo...

How can I go about generating the container class in this situation?

Answer 1

The .wrap method returns the original set of elements for chaining purposes.

$('<div class="'+fruitArray[fruit]+'" />')
.appendTo('#wrap')
.wrap('<div class="container" />')
.doSomething();