javascript - 为什么我的循环在使用 jQuery 显示数据时不起作用，但在浏览器控制台中却起作用？

Question

发布时间:

当我使用 console.log 运行循环来显示数据时，它可以工作。我得到了不同的标题和下面相应的片段。但是，当我包含 jQuery 时，标题会重复，并且代码片段不会显示。

更新的问题(包括缩略图和 URL 链接):

我正在使用 NY TIMES API，我正在尝试编写一个循环来列出文章；

1. 标题

2. 片段

3. 缩略图

4. 纽约时报链接的网址

我尝试了为文章标题及其片段编写的循环的不同变体，以获取文章缩略图和纽约时报网址，但我没有得到任何运气，控制台中也没有抛出任何错误。

这是一个包含 JSON API 数据的 JSFiddle:

https://jsfiddle.net/m15xg45j/

下面是我的 JS。

var url = "https://api.nytimes.com/svc/search/v2/articlesearch.json";

url += '?' + $.param({
    'api-key' : "67dac4e994164fca920f7a8420e28dc2",
    'q' : "health"
});

$.ajax({
    url: url,
    method: 'GET',
}).done(function(result){

    var articles = result.response.docs;

    for(var i=0; i<articles.length; i++){
      $("h2").each(function(index, el){
        $(el).html(articles[index].headline.main);
      });

      $("figcaption").each(function(index, el){
        $(el).html(articles[index].snippet);
      });

      $("img").each(function(index, el){
        $(el).html(articles[index].multimedia.url);
      });

      $("a").each(function(index, el){
        $("href").attr(articles[index].web_url)
      });
    }
}).fail(function(err){
    throw err;
});

这是 HTML

<div>
  <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg01.jpg">
    <h2>Headline</h2>
    <figure>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg01.jpg" alt="">
      <figcaption>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
      </figcaption>
    </figure>
  </a>
  <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg02.jpg">
    <h2>Headline</h2>
    <figure>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg02.jpg" alt="">
      <figcaption>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, ut labore et dolore magna aliqua
      </figcaption>
    </figure>
  </a>
  <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg03.jpg">
    <h2>Headline</h2>
    <figure>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg03.jpg" alt="">
      <figcaption>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, ut labore et dolore magna aliqua
      </figcaption>
    </figure>
  </a>
  <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg04.jpg">
    <h2>Headline</h2>
    <figure>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg04.jpg" alt="">
      <figcaption>
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </figcaption>
    </figure>
  </a>
  <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg05.jpg">
    <h2>Headline</h2>
    <figure>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg05.jpg" alt="">
      <figcaption>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, ut labore et dolore magna aliqua
      </figcaption>
    </figure>
  </a>
  <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg06.jpg">
    <h2>Headline</h2>
    <figure>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg06.jpg" alt="">
      <figcaption>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
      </figcaption>
    </figure>
  </a>
  <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg07.jpg">
    <h2>Headline</h2>
    <figure>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg07.jpg" alt="">
       <figcaption>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, ut labore et dolore magna aliqua
      </figcaption>
    </figure>
  </a>
  <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg08.jpg">
    <h2>Headline</h2>
    <figure>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg08.jpg" alt="">
      <figcaption>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
      </figcaption>
    </figure>
  </a>
</div>

Answer 1

问题在于:

$("h2").html(articles[i].headline.main);

每次执行 for 循环时，该行都会设置所有 H2 元素的 html。因此，在最后一次迭代中，所有 H2 元素的 html 设置为最后一篇文章。

您可能需要考虑:

var parent = $('.headline-collection');

for(var i=0; i<articles.length; i++) {
    var headline = $('<h2>' + articles[i].headline.main + '</h2>');
    parent.append(headline);
}

“var header...”行中的 html 模板可能是您的整篇文章，并且可能应该拆分为另一个“工厂”样式方法。