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

引发

未捕获的TypeError：element.closest（...）。data不是函数

Answer 1

您使用的closest()方法是本机JS方法，它返回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 2

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

$(element).closest...

Answer 3

element包含DOMElement，因此您呼叫的是native closest() method，而不是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')

希望这有帮助。