jQuery使用attr（）获取href无效

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/cn/travel/

Answer 1

您的代码中有几个错误：

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

2）您的发现缺少. 用于上课。 另外，您可以在单个语句find(".article-title a")编写它。

3）粗箭头功能无法建立自己的上下文，因此$(this)不起作用。 取而代之的是，您必须使用“古老的”编写函数的方法，才能使this函数实际上引用单个元素。

以下jQuery解决方案

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

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

以下香草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)