jQuery element.closest(...).attr 在使用每个函数时都不是函数答案

【问题标题】：jQuery element.closest(...).attr is not a function when using eachjQuery element.closest(...).attr 在使用每个函数时都不是函数
【发布时间】：2017-01-09 18:17:27
【问题描述】：

当迭代一些 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')

抛出

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

【问题讨论】：

标签： javascript jquery coffeescript

【解决方案1】：

您使用的closest() 方法是原生JS 方法，它返回DOM 元素对象，因为element 指的是DOM 元素对象。

有几个选项可以获取属性值，或者从 dataset property 获取：

$('.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')

【讨论】：

谢谢！！这完全有道理。在这种情况下，哪一种方法是对多个元素执行最快的方法？
@Denis ：我认为第一个，但它（在 JS 中最接近）没有得到广泛支持。所以我更喜欢最后一个
我建议始终使用坚持单一技术的变体，在这种情况下是最后一个，因为所有调用都是 jquery。这有助于消除您是否拥有 DOM 元素或 jquery 对象的任何混淆，从而提高可维护性。
在这种情况下你可能不想使用 js closest: developer.mozilla.org/en-US/docs/Web/API/Element/…

【解决方案2】：

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

$(element).closest...

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

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

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

希望这会有所帮助。

【讨论】：