Question

我想使用jquery填充bootstrap网格，但屏幕上没有显示任何内容。

HTML code：

<!--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>标记中显示NEWS描述，在<h3>标记中显示NEWS标题，但网页上不显示任何内容。

Answer 1

您需要在访问h3和p时删除新闻，而不是

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

如何使用jquery在bootstrap中填充网格？

2 个答案: