Tengo problemas para que funcione este script jQuery:
$(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'); } }); });El objetivo es buscar cada grupo div en "#view_498 > div.kn-list-content.columns.is-multiline" para ver si el valor de texto de '.field_744 .kn-detail-body' no está vacío, si es no está vacío, luego pone un resaltado amarillo en '.field_396 .kn-detail-body' en ese div respectivo. El problema que tengo es que se resaltan todos los '.field_396 .kn-detail-body' en todos los divs debajo del padre, incluso si no hay texto en field_744 de ese div respectivo.
¿Qué estoy haciendo mal?
Dentro de la devolución de llamada .each() , this se refiere al elemento de iteración actual. No necesita .eq(index) . Después de la primera iteración, .eq(index) devolvía un conjunto vacío
//$(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>