jQuery basic:如何使用此结构创建循环

jQuery basic: How to create a loop with this structure?

本文关键字：结构 创建 循环 何使用 basic jQuery      更新时间：2023-09-26
这是一个

非常简单的问题，但我不确定如何在互联网上搜索它。

我有一个空<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...

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

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

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

试试这个：

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

示例小提琴

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)
}
相关文章：