JSONデータを反復処理して個々のCSSを追加する方法

Question

JSONデータを使用して、以下のコードを使用してHTMLページに各記事タイトルと表紙画像を表示しますが、divコマンドにCSSコマンドを追加して余白他のスタイリングでは、行動しません。コンソールを見ると、titleとimage 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

ここでの問題は、あなたがDOMであなたの要素にarticle_dataを追加する場合、それらは右#one_article要素（<div class="title-home"></div>と<div class="cover-home"></div>）内の既存の要素の後に追加されていることです。したがって、Javascriptで生成する要素とは関係ありません。何をする必要があると私は本当に説明し、解決策を感謝

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