jQuery each and index function

I am having trouble getting this jQuery script to function:

$(document).on('knack-scene-render.scene_126', function() {
    $('#view_498 > div.kn-list-content.columns.is-multiline').each(function(index) {
       if ($(this).eq(index).find('.field_744 .kn-detail-body').text().length > 0) {
           $(this).eq(index).find('.field_396 .kn-detail-body').css('background-color','#ffff00');
       }
    });
});

The goal is to search each div group under “#view_498 > div.kn-list-content.columns.is-multiline” to see if the text value of ‘.field_744 .kn-detail-body’ is not empty, if it’s not empty, then it puts a yellow highlight on ‘.field_396 .kn-detail-body’ in that respective div. The problem I’m having is every single ‘.field_396 .kn-detail-body’ in all divs under the parent are being highlighted, even if there is no text in field_744 of that respective div.

What am I doing wrong?

Answer

Within the .each() callback, this refers to the current iteration element. You don’t need .eq(index). After the first iteration, .eq(index) was returning an empty set

//$(document).on('knack-scene-render.scene_126', function() {
  $('#view_498 > div.kn-list-content.columns.is-multiline').each(function() {
    const $this = $(this) // no need to keep jQuery-ing this
    if ($this.find(".field_744 .kn-detail-body").text().length > 0) {
      $this.find(".field_396 .kn-detail-body").css('background-color', '#ffff00');
    }
  });
//});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<!-- took a guess at your HTML -->
<div id="view_498"> <div class="kn-list-content columns is-multiline"> <div class="field_744"> <p class="kn-detail-body">Not empty text</p></div><div class="field_396"> <p class="kn-detail-body">Detail body #1</p></div></div><div class="kn-list-content columns is-multiline"> <div class="field_744"> <p class="kn-detail-body"></p></div><div class="field_396"> <p class="kn-detail-body">Detail body #2</p></div></div><div class="kn-list-content columns is-multiline"> <div class="field_744"> <p class="kn-detail-body">Also not empty</p></div><div class="field_396"> <p class="kn-detail-body">Detail body #3</p></div></div></div>