How to check in JavaScript/jQuery if an element has no 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. The place where its commented It should be added here only should have opacity-pointseven class added through script.

<div class="featured-block">
   <a href="/149553/" class="featured-block__item cf">
      <div class="featured-block__item-inner">
         <figure class="featured-block__image img-fit">  
            <img class="default-opacity" src="" srcset="">        // HERE default-opacity will added aocording to script
         </figure>
         <div class="featured-block__content">
            <h1 style="margin-bottom:0px;" class="featured-block__title"></h1>
            // No content
            <h1 class="featured-block__tag"></h1>
            // No content
         </div>
      </div>
   </a>
   <a href="/" class="featured-block__item cf">
      <div class="featured-block__item-inner">
         <figure class="featured-block__image img-fit">   
            <img src="">              // IT SHOULD BE ADDED HERE ONLY
         </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>
   <a href="/" class="featured-block__item cf">
      <div class="featured-block__item-inner">
         <figure class="featured-block__image img-fit">   
            <img src="">  // IT SHOULD BE ADDED HERE ONLY
         </figure>
         <div class="featured-block__content">
            <h1 style="margin-bottom:0px;" class="featured-block__title">Hello World</h1>
            <h1 class="featured-block__tag"></h1>
         </div>
      </div>
   </a>
   <a href="/" class="featured-block__item cf">
      <div class="featured-block__item-inner">
         <figure class="featured-block__image img-fit">   
            <img src="">    // IT SHOULD BE ADDED HERE ONLY
         </figure>
         <div class="featured-block__content">
            <h1 style="margin-bottom:0px;" class="featured-block__title"></h1>
            <h1 class="featured-block__tag">Thank You</h1>
         </div>
      </div>
   </a>
</div>

For empty element, I am checking in the following way:

<script>
    jQuery(function($) {
        $(".featured-block__item-inner").each(function() {
            if ($(this).find(".featured-block__title").is(":empty") && $(this).find(".featured-block__tag").is(":empty")) {
                $(this).find(".img-fit img").addClass("default-opacity");
            }
        });
    })
</script>

Problem Statement:

I am wondering for the element which is not empty, what changes I need to make in the script above. This is what I have tried. Instead of is, I have used not but it doesn't seem to work.

<script>
    jQuery(function ($) {
        $(".featured-block__item-inner").each(function () {
            if ($(this).find(".featured-block__title").is(":empty") && $(this).find(".featured-block__tag").is(":empty")) {
                $(this).find(".img-fit img").addClass("default-opacity");
            } else if ($(this).find(".featured-block__title").not(":empty") && $(this).find(".featured-block__tag").not(":empty")) {
                $(this).find(".img-fit img").addClass("opacity-pointseven");
            } else if ($(this).find(".featured-block__title").not(":empty") && $(this).find(".featured-block__tag").is(":empty")) {
                $(this).find(".img-fit img").addClass("opacity-pointseven");
            } else if ($(this).find(".featured-block__title").is(":empty") && $(this).find(".featured-block__tag").not(":empty")) {
                $(this).find(".img-fit img").addClass("opacity-pointseven");
            }

        });
    })
</script>