在数组中附加值数组 - jquery答案

【问题标题】：Append array of values inside array - jquery在数组中附加值数组 - jquery
【发布时间】：2013-10-25 02:59:54
【问题描述】：

我有一个数组数组，其值需要附加到 <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>

【问题讨论】：

在每个循环中存储 wrap 元素

标签： javascript jquery arrays foreach each

【解决方案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 对象并最后附加到主元素，更像这样。

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

【讨论】：