如何使用jQuery在引導程序中填充網格？

Question

我想使用jquery填充引導網格，但屏幕上什么都沒有顯示。

HTML代碼：

<!--Bootstrap Grids-->
    <div class="row">
    <div class="article">
        <div class="col-md-4" title="News">
            <h3></h3>
            <p></p>
        </div>
        <div class="col-md-4" title="News">
            <h3></h3>
            <p></p>
        </div>
        <div class="col-md-4" title="News">
            <h3></h3>
            <p></p>
        </div>
    </div>
    <div class="article">
        <div class="col-md-4" title="News">
            <h3></h3>
            <p></p>
        </div>
        <div class="col-md-4" title="News">
            <h3></h3>
            <p></p>
        </div>
        <div class="col-md-4" title="News">
            <h3></h3>
            <p></p>
        </div>
    </div>
    <div class="article">
        <div class="col-md-4" title="News">
            <h3></h3>
            <p></p>
        </div>
        <div class="col-md-4" title="News">
            <h3></h3>
            <p></p>
        </div>
        <div class="col-md-4" title="News">
            <h3></h3>
            <p></p>
        </div>
    </div>
    <div class="article">
        <div class="col-md-4" title="News">
            <h3></h3>
            <p></p>
        </div>
        <div class="col-md-4" title="News">
            <h3></h3>
            <p></p>
        </div>
        <div class="col-md-4" title="News">
            <h3></h3>
            <p></p>
        </div>
    </div>
</div>

JS代碼：

$.getJSON('https://newsapi.org/v1/articles?source=techcrunch&sortBy=top&apiKey=my-api-key',function (json) {
    console.log(json);

    for(var j=0;j<3;j++){
        $('.article News h3').eq(j).html(json.articles[j].title);
        $('.article News p').eq(j).html(json.articles[j].description);
    }

    });

我想在<p>標記中顯示新聞描述，在<h3>標記中顯示新聞標題，但是網頁上什么也沒有顯示。

Answer 1

您需要在訪問h3和p時刪除News，而不是

$('.article News h3').eq(j).html(json.articles[j].title);
$('.article News p').eq(j).html(json.articles[j].description);

做

$('.article h3').eq(j).html(json.articles[j].title);
$('.article p').eq(j).html(json.articles[j].description);

Answer 2

我同意前面的答案，盡管我將其添加為構建此結構的可能首選方法。

https://jsfiddle.net/xgqzureh/

的HTML：

<div class="row" id="articles"></div>

JavaScript：

//data that looks similar, use your return 'json' from get
json = {articles: [
    {title: 'art1', description: 'art1 desc'},
    {title: 'art2', description: 'art2 desc'},
    {title: 'art3', description: 'art3 desc'}
]};


//using your set up
for(var j=0;j<3;j++){
    $($('.article h3')[j]).html(json.articles[j].title);
    $($('.article p')[j]).html(json.articles[j].description);
}


//I believe to be a better way to do this
var j, articles = $('#articles');
for(j = 0; j<3 && j < json.articles.length; j += 1){
    $('<div>', {class: 'article'}).append(
        $('<div>', {class: 'col-md-4', title: 'News'})
            .append('<h3>' + json.articles[j].title + '</h3>')
            .append('<p>' + json.articles[j].description + '<p>')
    ).appendTo(articles);
}