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

但结果是主数组中的两个第一个数组都应用于第一个.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的所有元素，并将跨度附加到所有元素，因此您会看到此行为。

尝试：

_(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对象，最后追加到main元素，更像是这样。

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

在array-jquery中追加值数组

1 个答案: