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

INTO

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