如何迭代JSON数据并添加单个CSS？

Question

我使用JSON数据通过以下代码在HTML页面上显示每个文章标题和封面图像，但是当我尝试将CS​​S命令添加到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*/
}

Answer 2

这里的问题是，当您将article_data附加到DOM中的元素时，它们被添加到#one_article元素（ <div class="title-home"></div>和<div class="cover-home"></div> ）。 因此，它与您在Javascript中生成的元素无关。 您需要做的就是改变

$.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>';
});

进入

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