jQuery básico: ¿Cómo crear un bucle con esta estructura?

Esta es una pregunta realmente simple, pero no estoy seguro de cómo buscarla en Internet.

Tengo un vacio <div id="wrap"></div> que debe terminar luciendo de la siguiente manera:

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

En jquery tengo:

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

Debido a que necesito el div con la clase fruitArray para hacer algo, no puedo simplemente envolverlo con la clase contenedora: 

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

¿Cómo puedo generar la clase de contenedor en esta situación?

preguntado el 22 de mayo de 12 a las 10:05

3 Respuestas

La .envoltura El método devuelve el conjunto original de elementos para fines de encadenamiento.

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

contestado el 22 de mayo de 12 a las 10:05

Prueba esto:

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

Violín de ejemplo

contestado el 22 de mayo de 12 a las 10:05

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

O también puedes hacerlo como 

var fruitArray = ['apples','banana','orange','grapes'];
for (fruit in fruitArray) {
    $('<div class="'+fruitArray[fruit]+'" />').appendTo('#wrap').doSomething().wrap('<div class="container" />');
// this will work if the doSomething is a jquery/plugin method that is using chaining (usually they do)
}

contestado el 22 de mayo de 12 a las 10:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.