javascript对象附加子对象

没有在论坛上找到类似的问题，所以我希望你能帮我解决

我有一个多层对象，我想使用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>')
 }
}

for（变量i=0；i”+blogName+blogImage+”）
}
}

在第二个循环中，子对象出现，但不在相应的父对象中。（例如：我让B的孩子进入A名单）

Thx

这条线

$('.blog-list')

。。。从live DOM中选择所有元素，而不仅仅是刚创建的元素。解决此问题的一种可能方法是存储jQuery包装的（

）元素，然后在附加

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

这段代码不仅在完全准备好的情况下更新live DOM，还消除了来自rogue

blogName

和

blogImage

值的XSS威胁。如果没有必要，只需重用第一个代码片段中给出的技术

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