get data from elements inside each loop

$('.post-type-archive-product .elementor-grid > div.e-loop-item').each(function() {
    
    setTimeout( function() {
    
        var get_prod_name = $('.product_title > a', this).text();
        var get_prod_sku = $('div.sku_wrapper > .sku', this).text();

        console.log(get_prod_sku);

    }, 500);
        
});

Can someone help me with pointing what I’m doing wrong here… in a each loop, I’m trying to get 2 datas inside variables get_prod_name and get_prod_sku… but it’s not working at all… it just shows blank(no info)… although there is info in all of the 28 blocks in the each loop

>Solution :

this isn’t what you think it is in the context that you’re using it. Note the use of setTimeout, so by the time that code runs (500ms later) you’re no longer in the context of the callback to .each().

You can capture the value of this in a variable and use that variable instead, for example:

$('.post-type-archive-product .elementor-grid > div.e-loop-item').each(function() {

  // capture it here
  var self = this;

  setTimeout( function() {
    var get_prod_name = $('.product_title > a', self).text();
    var get_prod_sku = $('div.sku_wrapper > .sku', self).text();
    console.log(get_prod_sku);
  }, 500);    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="post-type-archive-product">
  <div class="elementor-grid">
    <div class="e-loop-item">
      <div class="product_title">
        <a href="#">one</a>
      </div>
      <div class="sku_wrapper">
        <div class="sku">two</div>
      </div>
      <div class="product_title">
        <a href="#">three</a>
      </div>
      <div class="sku_wrapper">
        <div class="sku">four</div>
      </div>
    </div>
  </div>
</div>