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?

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?

• javascript
• jquery
• find
• each

• @PranavCBalan omg omg of course! THX very much! I need definitely more sleep. – Orlandster Commented Feb 12, 2017 at 15:38
• $('.test-list .test-item .test-paragraph').text((i, txt) => console.log(txt)) jsfiddle/53Lm73fu – user1106925 Commented Feb 12, 2017 at 15:47
• Or just use its parameter, which is more in keeping with standard APIs anyway. $('.test-list .test-item').each((i, el) => { console.log($(el).find('.test-paragraph').text()); }); jsfiddle/53Lm73fu/1 While this is closer to standard iteration methods, jQuery decided to reverse the params. If you were using .forEach instead, the el would be the first param. – user1106925 Commented Feb 12, 2017 at 15:50

1 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()));