javascript对象追加子 child

Question

在论坛中没有找到类似的问题，所以我希望你能帮助解决这个问题。

我有一个多层对象，我想使用 javascript 将其 append 为不同的列表作为 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>')
 }
}

在第二个循环中， child 出现但不在相应的 parent 中。 (例如:我让 B 的 child 进入 A 列表)；

谢谢

Answer 1

这一行...

$('.blog-list')

... 选择所有类为blog-list 的元素来自实时 DOM，而不仅仅是刚刚创建的那个。解决此问题的一种可能方法是存储 jQuery 包装的 ( <ul> ) 元素，然后在 append <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);
}

请注意，我将该元素 append 到 body进一步向下循环。在这个特定的片段中这无关紧要，但通常最好尽可能推迟 append 到“实时”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，它还消除了来自流氓的 XSS 威胁 blogName和 blogImage值。如果没有必要，只需重复使用第一个片段中给出的技术。