使用each时，jQuery element.closest（...）.attr不是一个函数

Question

当我迭代一些DOM元素时，我发现无法在它们上面使用.data或.attr：

$('.running').each (index, element) =>
    console.log element.closest('[data-id]')

获取我

<section class="job-block" data-id="240"></section>
...

但是

$('.running').each (index, element) =>
    console.log element.closest('[data-id]').data('id')

throws

未捕获的类型错误：element.closest（...）.data不是函数

- The Whiz of Oz

Answer 1

您正在使用的closest()方法是JS原生方法，由于element引用DOM元素对象，因此返回DOM元素对象。

---

有几种选项可获取属性值，可以从dataset属性中获取：

$('.running').each (index, element) =>
    console.log element.closest('[data-id]').dataset.id

---

或者使用jQuery包装元素，并使用data()方法。

$('.running').each (index, element) =>
    console.log $(element.closest('[data-id]')).data('id')

---

或者将element用jQuery包装，并使用jQuery closest()方法。

$('.running').each (index, element) =>
    console.log $(element).closest('[data-id]').data('id')

- Pranav C Balan

---

谢谢！这完全有道理。在这种情况下，哪种方法可以在多个元素上实现最快的性能？ - The Whiz of Oz

@Denis：我认为第一个，但它（在JS中最接近的）得不到广泛支持...所以我更喜欢最后一个。 - Pranav C Balan

我建议始终使用坚持单一技术的变量，因为所有调用都是jQuery。这有助于消除任何困惑，无论您是否具有DOM元素或jQuery对象，从而提高可维护性。 - freedomn-m

在这种情况下，您可能不想使用js的closest：https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Browser_compatibility - freedomn-m

Answer 2

因为它们是DOM对象（正如您所说），而不是jQuery对象，因此您无法对DOM对象应用jQuery方法，您需要将它们转换为jQuery对象。

$(element).closest...

- freedomn-m

Answer 3

element包含一个DOMElement，因此你调用的是本地closest()方法，而不是jQuery的closest()方法。因此，在返回的对象上不存在data()方法。

要解决这个问题，请将element封装在一个jQuery对象中：

$('.running').each (index, element) =>
    console.log $(element).closest('[data-id]').data('id')

- Rory McCrossan

Answer 4

data() 是 jQuery 的方法，因此您应该在 jQuery 对象上调用它而不是 DOM 对象，所以它应该是 $(element) ：

console.log $(element).closest('[data-id]').data('id')

希望这有所帮助。

- Zakaria Acharki