How To Add A Class In Javascript/jquery If An Element Has Content In It?

I am working on a website in which I want to check whether element has any content in it. Below is my html code. I have mentioned condition#1 where opacity-pointseven class should

Solution 1:

You can loop over parent div and find the child items and then add the class over there.

Here in the example, I am getting $('.featured-block__item-inner') as a parent and then finding items inside it.

$('.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;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="featured-block"><ahref="/"class="featured-block__item cf"><divclass="featured-block__item-inner"><figureclass="featured-block__image img-fit"><imgsrc=""></figure><divclass="featured-block__content"><h1style="margin-bottom:0px;"class="featured-block__title">Trans Mountain Pipeline: NEB Releases New Report, Recommends Approval </h1><h1class="featured-block__tag"> More Coverage</h1></div></div><divclass="featured-block__item-inner"><figureclass="featured-block__image img-fit"><imgsrc=""></figure><divclass="featured-block__content"><h1style="margin-bottom:0px;"class="featured-block__title"></h1><h1class="featured-block__tag"> More Coverage</h1></div></div></a></div>

Solution 2:

i hope the following script will heplful.

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
    } 
});

Solution 3:

I think you can edit a bit in your code .not(":empty") to .html()

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

        });
    })
</script>

Solution 4:

<div class="featured-block">
 <ahref="/"class="featured-block__item cf"><divclass="featured-block__item-inner"><figureclass="featured-block__image img-fit"><imgsrc="">              // (condition#1, where opacity-pointseven needs to be added)
         </figure><divclass="featured-block__content"><h1style="margin-bottom:0px;"class="featured-block__title">Trans Mountain Pipeline: NEB Releases New Report, Recommends Approval </h1><h1class="featured-block__tag"> More Coverage</h1></div></div></a></div><script>jQuery(function ($) {
        if ($(".featured-block__title").html() != undefined && $(".featured-block__title").html() != "" && $(".featured-block__tag").html() != undefined && $(".featured-block__tag").html() != "") {
                $(".featured-block__tag").addClass("opacity-pointseven");  // For condition#1
            } 

        });
    })
</script>

Above is changes with your provided code. in jquery you can find classes or Ids directly without using this object. this is only required where you are in looping of some specific element (ie. inside Div loop).