在jQuery的each循环中获取元素的父级

Question

我完全被困住了。页面上有三个类为 .topic-link 的元素。

<div id="parent1">
  <a href="#" class="topic-link"></a>
</div>
<div id="parent2">
  <a href="#" class="topic-link"></a>
</div>
<div id="parent3">
  <a href="#" class="topic-link"></a>
</div>

我可以在JS控制台中运行$('.topic-link').eq(0).parent();并得到正确的父元素返回。但是当我遍历它们时，每次都会得到一个空对象。

$('.topic-link').each( () => {
  console.log($(this).parent());
});

// returns 3 empty objects 

- Andrew Jensen

---

也许如果那些评论说无法复现的人真的尝试去复现，你就不会发帖了。 - Tibrogargan

@KevinB 更好的答案是使用$('elems').each() with fat arrow。 - Mohammad

Answer 1

箭头函数没有自己的this，所以你拥有的不等同于它本身。

$('.topic-link').each(function () {
  console.log($(this).parent());
});

在您的情况下，this 是 window（或者根据调用它的作用域而定的document或其他）, 它没有父dom节点。

- charlietfl

---

不确定为什么会有人踩，这是正确的。https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions “箭头函数不会创建自己的this上下文，因此this具有来自包含上下文的原始含义。” - Jason P

显然，你可以使用箭头函数语法；你只需要传入.each()提供的参数就可以。 - j08691

@j08691 当然可以...但这并不意味着这里有任何错误，也不表示这就是你需要做的。 - charlietfl

@Tibrogargan 我真的只关注于“为什么”的部分。 - charlietfl

伙计们，太棒了。我得到了我需要的答案。继续进行。 - Andrew Jensen

Answer 2

从@charlietfl的回答中得知，你遇到这个问题是因为箭头函数不绑定它们自己的this。

要继续使用箭头函数的话，解决方法是使用.each()的第二个参数——对象/数组的值。

例如（因为arguments变量也没有被绑定，所以需要传入参数）：

$('.topic-link').each( (∅, value) => {
  console.log($(value).parent());
});

- Tibrogargan