Question

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

我有一个多层对象，我希望使用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名单）;

THX

Answer 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。它在这个特定的片段中无关紧要，但通常最好推迟附加到“直播”中。 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威胁。如果没有必要，只需重复使用第一个代码段中给出的技术。

javascript对象追加子子

1 个答案: