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

Question

When iterating over some DOM elements I found it impossible to use .data or .attr on them:

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

gets me

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

but

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

throws

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

Solution 1

The closest() method that you are using is native JS method and which returns DOM element object since element refers DOM element object.

---

dataset

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

---

data()

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

---

element

closest()

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

Solution 2

Because they are DOM objects (as you rightly state) and not jquery objects, you can't apply jquery methods to DOM objects, you need to convert them to jquery objects.

$(element).closest...

Solution 3

The element contains a DOMElement, so you're calling the native closest() method, not the jQuery one. Hence the data() method does not exist on the returned object.

To fix this, wrap element in a jQuery object:

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

Solution 4

data() is a jQuery method so you should call it on jQuery object instead of a DOM oject, so it should be $(element) :

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

Hope this helps.

View more solutions

Comments

[The Whiz of Oz]

thanks!! It totally makes sense. Which one would be the fastest performing method on multiple elements in this case?

[Pranav C Balan]

@Denis : I think the fist one but it's(closest in JS) not widely supported.. So I would prefer the last one

[freedomn-m]

I recommend always using the variant that sticks with a single tech, in this case the last one as all calls are jquery. This helps remove any confusion whether you have a DOM element or jquery object and so improves maintainability.

[freedomn-m]

In this case you probably don't want to use the js closest: developer.mozilla.org/en-US/docs/Web/API/Element/…