如何迭代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>';
});