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] + '"></div>').appendTo('#wrap').wrap('<div class="container"></div>');
}

Example fiddle

Answer 3

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

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

3 个答案: