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

Question

When repeating some DOM elements, I was unable 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

Answer 1

The method closest()you use is a native JS method and that returns a DOM element object, since it elementrefers to a DOM element object.

---

There are several options for obtaining the attribute value: either get the datasetproperty:

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

---

Or wrap the jQuery element and use the method 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')

Answer 2

DOM ( ), jquery, jquery DOM, jquery.

$(element).closest...

Answer 3

element DOMElement, native closeest(), 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')

, .