Question

我想在我的网站上显示新闻头条。我想用Jquery填充它。我编写了代码，但网页上没有显示任何内容。

HTML code：

<div class="col-md-4">
            <div id="sidebar-wrapper">
                <ul class="sidebar-nav">
                        <strong>Latest Headines</strong>
                    <li>
                        <a href="" class="title">
                            <h2> </h2>
                        </a>
                    </li>
                    <li>
                        <a href="" class="title">
                            <h2> </h2>
                        </a>
                    </li>
                    <li>
                        <a href="" class="title">
                            <h2> </h2>
                        </a>
                    </li>
                    <li>
                        <a href="" class="title">
                            <h2> </h2>
                        </a>
                    </li>
                    <li>
                        <a href="" class="title">
                            <h2> </h2>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

JS代码：

$(document).ready(function() {

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

        function headlines (json) {
            for(var i=0;i<5;i++){
                $('.sidebar-nav li a h2').eq(i).html(json.articles[i].title);
            }
        }
});
});

我创建了一个名为sidebar的类，然后在类中我放置了list和anchor，后跟<h2></h2>标记。我想使用NEWS标题填充h2标记，但我的网页上没有显示任何内容。

Answer 1

$('.sidebar-nav li').eq(i).find('h2').html(...)

li是您正在寻找的第N个元素，而不是h2。

就此而言，你应该缓存nav元素或li，以避免锤击DOM：

var $lis = $('.sidebar-nav li')

for(var i=0;i<5;i++){
     $lis[i].find('h2').html(json.articles[i].title);
}

Answer 2

首先：你没有调用你的功能标题，所以什么都没有输出;）

第二个：

$('.sidebar-nav li a h2').eq(i)

仅适用于我认为的第一个项目，因为a-Tag中只有1个H2-Tag。我建议给所有H“-Tag一个像”.headline“这样的类，然后对它们进行迭代。

我希望这会有所帮助;）

我应该如何使用jquery填充嵌套元素？

2 个答案: