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 class="container"><div class="'+fruitArray[fruit]+'"></div></div>').appendTo... 

我该如何克服o关于在这种情况下生成容器类？

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