Question

我有一个页面*，其中有几个.article div，带有以下标记：

<div class="article">
  <div class="featured-img">
    <a href="https://www.johornow.com/english/things-to-do-at-kota-tinggi/" style="background: none;">
    </a>
  </div>
  <div class="featured-info">
    <h3 class="article-title">
      <a href="https://www.johornow.com/english/things-to-do-at-kota-tinggi/">Fun Things to Do and Amazing Places to Visit at Kota Tinggi</a>
    </h3>
  </div>
</div>

现在我想获得所有锚链接：

$('.article').each( e => $(this).find('article-title').find('a').attr("href") )

令人惊讶的是我没有这样做，我得到了DOM节点。我的代码有什么问题？！

* https://www.johornow.com/english/travel/

Answer 1

您的代码中有几处错误：

1）JQuery是关于链接的，这就是为什么像each之类的函数返回初始集而不是函数中返回的元素（或返回值的集合？）。您想要/需要的是.map。

2）你的发现缺少.来解决课程问题。此外，您可以在单个语句find(".article-title a")中编写它。

3）胖箭头函数没有建立自己的上下文，因此$(this)将不起作用。相反，你必须使用“老派”编写函数的方式，实际上this引用单个元素。

以下jquery解决方案

$('.article .article-title a').map( function(){return console.log($(this).attr("href"))} )

创建一个包含所有链接href的数组。

以下的香草JS（我实际上总是喜欢）也是如此：

[].map.call(document.querySelectorAll('.article .article-title a'), e=>e.href )

在那里你再次看到了你的花哨箭头 - 而且，它更短，（可能更快）并且不依赖于第三方;）

Answer 2

您可以获取数组中的所有链接

var m =[];
$('.article').each(function(e,v){
m.push($(this).find('h3 > a').attr("href"))
})
console.log(m)

jquery使用attr（）得到一个href不起作用

2 个答案: