0

我有一个数组数组，其中包含我需要附加到的值<div>，但不知何故.each()，underscore.js的功能无法按预期工作..

数组：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');
   });
});

但结果是主数组中的两个第一个数组都应用于第一个.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>
4

1 回答 1

2

您需要选择.wrap需要追加的内容。.wrap将选择所有wrap已附加类的元素，并将跨度附加到所有元素，因此您会看到这种行为。

尝试：

_(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.
   });
});

演示

如果要附加的项目太多，请考虑在最后而不是在循环中附加到 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
于 2013-10-16T20:11:40.613 回答