追加數組 - jQuery的

Question

我有陣列與我需要追加到<div>值的數組，但不知何故，如預期的underscore.js.each()功能不起作用..

陣列：var arr = [['20-12-2012', 'Text'],['01-02-2012', 'Text2'], ...];

怎麼我的函數如下：

_(arr).each(function (row, i) { 
    $('<div class="wrap"></div>').appendTo('#mainWrap'); 

    _(row).each(function (line) { 
     $('<span>' + line + '</span>').appendTo('.wrap'); 
    }); 
}); 

，但結果是，無論兩個第一陣列插件IDE主陣列被應用到第一.wrap：

結果：

<div id="mainWrap"> 
    <div class="wrap"> 
    <span>20-12-2012</span><span>Text</span> 
    <span>01-02-2012</span><span>Text2</span> 
    </div> 
    <div class="wrap"> 
    <span>01-02-2012</span><span>Text2</span> 
    </div> 
</div> 

但我希望它是爲：

<div id="mainWrap"> 
    <div class="wrap"> 
    <span>20-12-2012</span><span>Text</span> 
    </div> 
    <div class="wrap"> 
    <span>01-02-2012</span><span>Text2</span> 
    </div> 
</div> 

Answer 1

你需要選擇你需要哪些.wrap附加到。 .wrap將選擇已添加的類wrap的所有元素，並將span擴展到所有元素，因此您會看到此行爲。

嘗試：

_(arr).each(function (row, i) { 
    var $wrap = $('<div class="wrap"></div>').appendTo('#mainWrap'); //save the wrap here 

    _(row).each(function (line) { 
     $('<span>' + line + '</span>').appendTo($wrap); //append to the wrap that was created in the previous loop. 
    }); 
}); 

Demo

如果你有太多的項目要追加考慮追加到DOM元素到底，而不是在循環，將它們保存到一個臨時jQuery對象並最終追加到主要元素，更像這樣。

var arr = [['20-12-2012', 'Text'],['01-02-2012', 'Text2']], $main = $('<div/>'); 

_(arr).each(function (row, i) { 
    var $wrap = $('<div class="wrap"></div>').appendTo($main); 

    _(row).each(function (line) { 
     $('<span>' + line + '</span>').appendTo($wrap); 
    }); 
}); 
$('#mainWrap').append($main.html()); //Append to DOM now. For replace use .html