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

Question

我想在我的网站上显示新闻标题。我想使用 Jquery 填充它。我已经编写了代码，但网页上没有任何显示。

HTML 代码:

<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);
            }
        }
});
});

我创建了一个名为侧边栏的类，然后在类中我放置了列表和 anchor ，然后是 <h2></h2>标签。我想填充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);
}