javascript - jQuery basic：如何使用这种结构创建循环？

Question

这是一个非常简单的问题，但我不知道如何在互联网上搜索它。

我有一个空<div id="wrap"></div>的，最终需要如下所示：

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

在 jquery 中我有：

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

因为我需要带有 fruitArray 类的 div 来做某事，所以我不能只用容器类将它包装起来：

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

在这种情况下，我该如何生成容器类？

Answer 1

.wrap方法返回用于链接目的的原始元素集。

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

Answer 2

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

或者你也可以这样做

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

Answer 3

尝试这个：

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

示例小提琴