jQuery .find() inside .each() not working

Question

Currently I'm stuck in a very basic jQuery problem. I think there's something I do not understand about jquery's .each().

So this is my code:

     $('.test-list .test-item').each(() => {
        console.log($(this).find('.test-paragraph').text()); //not working always empty
     });

I'm just iterating over a bunch of items which perfectly works. But then I want to get the text of the.test-paragraph inside my element. The problem is that the find() method isn't working. Alle the html element exist.

<div class="test-list">
   <div class="test-item">
      <p class="test-paragraph">Test 1</p>
   </div>
   <div class="test-item">
      <p class="test-paragraph">Test 2</p>
   </div>
   <div class="test-item">
      <p class="test-paragraph">Test 3</p>
   </div>
</div>

Does anyone know what's the problem?

Answer 1

As per the MDN doc :

An arrow function expression has a shorter syntax than a function expression and does not bind its own this, arguments, super, or new.target. Arrow functions are always anonymous. These function expressions are best suited for non-method functions, and they cannot be used as constructors.

Inside of arrow function this won't refers to the element, so instead use the normal function.

$('.test-list .test-item').each(function() {
   console.log($(this).find('.test-paragraph').text());
});

---

Or you can use text() method with a callback to iterate and get text content of the element.

$('.test-list .test-item .test-paragraph').text((i, text) => console.log(text))

---

Or instead of this use the second argument in the arrow function and as per the docs which refer to the element.

$('.test-list .test-item').each((i, ele) => console.log($(ele).find('.test-paragraph').text()));