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

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

有人能认出我做错了什么吗

HTML:

---

您没有将类添加到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);

---

您没有将类添加到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\u数据

附加到DOM中的元素时，它们会添加到

\one\u article

元素（

和

中的现有元素之后。因此，它与您在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>';
});

$。每个（数据、函数（键、值）{
第九条数据+=''；
article_data+=''+value.title+''；
第九条数据+=''；
第九条数据+=''；
});

进入

$。每个（数据、函数（键、值）{
第九条数据+=''；
article_data+=''+value.title+''；
第九条数据+=''；
第九条数据+=''；
});

这里的问题是，当您将

文章数据

附加到DOM中的元素时，它们会添加到

一篇文章

元素（

和

中的现有元素之后。因此，它与您在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>';
});

$。每个（数据、函数（键、值）{
第九条数据+=''；
article_data+=''+value.title+''；
第九条数据+=''；
第九条数据+=''；
});

进入

$。每个（数据、函数（键、值）{
第九条数据+=''；
article_data+=''+value.title+''；
第九条数据+=''；
第九条数据+=''；
});

我非常感谢您的解释和解决方案。非常感谢你！它工作得很好。我真的很感谢你的解释和解决方案。非常感谢你！它工作得很好。

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

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