jQuery .find() внутри .each() не работает

Question

В настоящее время я застрял в очень простой проблеме jQuery. Я думаю, что есть что-то, что я не понимаю о jquery's .each().

Так что это мой код:

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

Я просто итерация кучу предметов, которые отлично работает. Но тогда я хочу получить текст абзаца the.test внутри моего элемента. Проблема заключается в том, что метод find() не работает. Также существует элемент html.

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

Кто-нибудь знает, в чем проблема?

Answer 1

Согласно MDN doc:

выражения функции

стрелки имеет более короткий синтаксис, чем выражение функции и не связывают свои собственное это, аргументы, супер, или new.target. Функции стрелок всегда анонимны. Эти выражения функций лучше всего подходят для функций не-метода, и они не могут использоваться в качестве конструкторов.

Внутри функции стрелки this не относится к элементу, поэтому вместо этого используйте обычную функцию.

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

---

Или вы можете использовать text() метод с обратным вызовом для итерации и получить текстовое содержимое элемента.

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

---

Или вместо this использовать второй аргумент в функции, указанной стрелки, и в соответствии с docs, которые относятся к элементу.

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