How to add a class in Javascript/jQuery if an element has content in it?

Question

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 be added through script if classes featured-block__title and featured-block__tag have content in it.

<div class="featured-block">
   <a href="/" class="featured-block__item cf">
      <div class="featured-block__item-inner">
         <figure class="featured-block__image img-fit">   
            <img src="">              // (condition#1, where opacity-pointseven needs to be added)
         </figure>
         <div class="featured-block__content">
            <h1 style="margin-bottom:0px;" class="featured-block__title">Trans Mountain Pipeline: NEB Releases New Report, Recommends Approval </h1>
            <h1 class="featured-block__tag"> More Coverage</h1>
         </div>
      </div>
   </a>
</div>

Problem Statement:

I tried in the following way, but it doesn't seem to work properly.

<script>
    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
            } 

        });
    })
</script>

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

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

    <div class="featured-block__item-inner">
      <figure class="featured-block__image img-fit">
        <img src="">
      </figure>
      <div class="featured-block__content">
        <h1 style="margin-bottom:0px;" class="featured-block__title"></h1>
        <h1 class="featured-block__tag"> More Coverage</h1>
      </div>
    </div>
  </a>
</div>

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

Answer 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>

Answer 4

<div class="featured-block">
 <a href="/" class="featured-block__item cf">
    <div class="featured-block__item-inner">
      <figure class="featured-block__image img-fit">   
         <img src="">              // (condition#1, where opacity-pointseven needs to be added)
         </figure>
         <div class="featured-block__content">
            <h1 style="margin-bottom:0px;" class="featured-block__title">Trans Mountain Pipeline: NEB Releases New Report, Recommends Approval </h1>
            <h1 class="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).