javascript - 如何迭代 JSON 数据并添加单独的 CSS？

Question

我使用 JSON 数据使用下面的代码在 HTML 页面上显示每篇文章标题和封面图片，但是当我尝试将 CSS 命令添加到 div 标签以添加一些边距和其他样式时，它们没有被执行。查看控制台，标题和图像 div 没有标有我在 HTML 中指定的 ID 和类(见下图)。

有谁能找出我做错了什么吗？

HTML:

<div id="header">
  <img src="images/cn-header.jpg" alt="logo" />
</div>

<div id="container">
  <div id="one_article">
    <div class="title-home"></div>
    <div class="cover-home"></div>
  </div>
</div>

JavaScript:

$(document).ready(function() {
  $.getJSON("article.json", function(data){
    console.log(data) //just to log in console as well
    var article_data = '';
    $.each(data, function(key, value){
      article_data += '<div>';
      article_data += '<div>' + value.title + '</div>';
      article_data += '<div> <img src="' + value.cover + '"> </div>';  
      article_data += '</div>';
    });
    $('#one_article').append(article_data);
  });
});

CSS:

#header {
  width: 100%;
  margin: 10px 10px 100px 10px;
}
#header img {
  margin: 0 auto;
  display: block;
}
body {
  font-family: sans-serif;
}
#container {
  width: 100%;
  text-align: -webkit-center;
}
#one_article {

}
.title-home {
  font-weight: bold;
  font-size: 16px;
}
.cover-home {

}
.cover-home img {
  height: 200px;
  width: auto;

Answer 1

您没有向 div 添加类，(最好为文章使用一个类，并附加到容器而不是文章)使用这个:

$.each(data, function(key, value){
      article_data += '<div class="article">';
      article_data += '<div class="title-home">' + value.title + '</div>';
      article_data += '<div class="cover-home"> <img src="' + value.cover + '"> </div>';  
      article_data += '</div>';
    });
$('#container').append(article_data);

.article {
    /*CSS-CODE for all articles*/
}