How to check in JavaScript/jQuery if an element has no 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. 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>

Possible duplicate of jquery if div id has children

admcfajn
– admcfajn

2019-11-13 09:04:48 +00:00
Commented Nov 13, 2019 at 9:04 — admcfajn
– admcfajn, Commented Nov 13, 2019 at 9:04

pigeontoe · Accepted Answer · 2019-03-12 01:37:57Z

1

For that you use .not(":empty")

answered Mar 12, 2019 at 1:37

pigeontoe

4863 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pigeontoe Over a year ago

Didn't see this last night. What's up?

Jack Bashford · Accepted Answer · 2019-03-12 01:42:27Z

0

You want to check if something is not empty - don't use is, just use not:

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

answered Mar 12, 2019 at 1:42

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

1 Comment

flash Over a year ago

It doesn't seem to work. I have updated my question. Let me know if you need more information.

Collectives™ on Stack Overflow

How to check in JavaScript/jQuery if an element has no content in it?

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related