jQuery element.closest(...).attr 在使用 each 时不是一个函数

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')

投掷

Uncaught TypeError: element.closest(...).data is not a function

Answer 1

因为它们是 DOM 对象（如你所说）而不是 jquery 对象，你不能将 jquery 方法应用于 DOM 对象，你需要将它们转换为 jquery 个对象。

$(element).closest...

Answer 2

您使用的 closest() 方法是原生 JS 方法，returns DOM 元素对象，因为 element 引用 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')

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

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

Answer 3

element 包含一个 DOMElement，因此您正在调用 native closest() method, not the jQuery one。因此，data() 方法在返回的对象上不存在。

要解决此问题，请将 element 包装在 jQuery 对象中：

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

Answer 4

data() 是一个 jQuery 方法，所以你应该在 jQuery 对象而不是 DOM 对象上调用它，所以它应该是 $(element) ：

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

希望对您有所帮助。

jQuery element.closest(...).attr is not a function when using each