javascript 对象附加子子项答案

【问题标题】：javascript object append sub childrenjavascript 对象附加子子项
【发布时间】：2018-05-26 14:15:32
【问题描述】：

未能在论坛中找到类似的问题，因此希望您能提供帮助。

我有一个多层对象，我想使用 javascript 将其附加为与 HTML 不同的列表。

这是构建 obj 的方式：

var obj = [
  {
    month: "A",
    content: [
      {
        name: "A-content",
        image: "A-image"
      }
    ]
  },
  {
    month: "B",
    content: [
      {
        name: "B-content",
        image: "B-image"
      }
   ]
  }
];

这是我的循环方式：

for (var i = 0; i < obj.length; i++) {
 var contents = obj[i].content;

 // Create list
 var blogList = '<ul class="blog-list"></ul>';

 // Append list
 $('body').append(blogList);

  for(var j = 0; j < contents.length; j++) {
   var blogName = contents[j].name,
       blogImage = contents[j].image;

   // How to append these sub element to corresponding parent ???
      $('.blog-list').append('<li>'+ blogName + blogImage +'</li>')
 }
}

在第二个循环中，孩子出现但不在相应的父母中。（例如：我让 B 的孩子进入 A 列表）；

谢谢

【问题讨论】：

标签： javascript jquery loops object append

【解决方案1】：

这一行...

$('.blog-list')

... 从实时 DOM 中选择所有类为 blog-list 的元素，而不仅仅是刚刚创建的元素。解决此问题的一种可能方法是存储 jQuery 包装的 (<ul>) 元素，然后在附加 <li>-s 时重新使用它：

for (var i = 0; i < obj.length; i++) {
  var contents = obj[i].content;

  // Create list
  var $blogList = $('<ul class="blog-list"></ul>');
  for(var j = 0; j < contents.length; j++) {
     var blogName = contents[j].name,
         blogImage = contents[j].image;

     // reusing the $blogList element
     $blogList.append('<li>'+ blogName + blogImage +'</li>');
  }

  // Append list
  $('body').append($blogList);
}

请注意，我将该元素附加到body 中，进一步向下循环。在这个特定的 sn-p 中无关紧要，但通常最好尽可能推迟附加到“实时”DOM。

您可以通过使用博客列表数组来扩展这个想法：

var bloglists = obj.map(function(contents) {
  var $bloglist = $('<ul class="blog-list"></ul>');
  contents.forEach(function(blogData) {
    var $li = $('<li></li>');
    $li.text(blogData.name + blogData.image);
    $bloglist.append($li); 
  });
  return $bloglist[0];
});

$('body').append(bloglists);

不仅此代码仅在完全准备好后才更新实时 DOM，它还消除了来自流氓 blogName 和 blogImage 值的 XSS 威胁。如果这不是必需的，只需重用第一个 sn-p 中给出的技术。

【讨论】：