¿Cómo agregar una clase en Javascript / jQuery si un elemento tiene contenido?

Estoy trabajando en un sitio web en el que quiero comprobar si el elemento tiene algún contenido.

A continuación se muestra mi código html. He mencionado la condición # 1 donde la clase opacity-pointseven debe agregar a través del script si las clases featured-block__title y featured-block__tag tienen contenido.

  

Planteamiento del problema:

Lo intenté de la siguiente manera, pero no parece funcionar correctamente.

  jQuery(function ($) { if ($(this).find(".featured-block__title").not(":empty") && $(this).find(".featured-block__tag").not(":empty")) { $(this).find(".img-fit img").addClass("opacity-pointseven"); // For condition#1 } }); })  

Espero que la siguiente secuencia de comandos sea útil.

 jQuery(function ($) { if ($(".featured-block__title").text().length != 0 && jQuery('.featured-block__tag').text().length != 0 ) { $(".img-fit img").addClass("opacity-pointseven"); // For condition#1 } }); 

Puede pasar por encima de la división principal y encontrar los elementos secundarios y luego agregar la clase allí.

Aquí, en el ejemplo, $('.featured-block__item-inner') como padre y luego encuentro elementos dentro de él.

 $('.featured-block__item-inner').each(function() { if ($(this).find(".featured-block__title").not(":empty").length > 0 && $(this).find(".featured-block__tag").not(":empty").length > 0) { $(this).find(".img-fit img").addClass("opacity-pointseven"); // For condition#1 } else { $(this).find(".img-fit img").addClass("default-opacity"); } }) 
 .opacity-pointseven { width: 100px; height: 100px; } .default-opacity { width: 50px; height: 50px; } 
   

Creo que puedes editar un poco en tu código .not(":empty") a .html()

  
   

Arriba hay cambios con su código provisto. En jquery puedes encontrar clases o identificadores directamente sin usar this objeto. esto solo es necesario cuando se está haciendo un bucle de algún elemento específico (es decir, dentro del bucle Div).