How to check in jQuery if an element has content in it? [duplicate]

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.

<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)
         </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>

This following script is checking for non-existing featured-block__title and featured-block__tag classes as well inside the div.featured-block__item-inner and adding opacity-pointseven in img tag. else if ($(this).find(".featured-block__title").not(":empty") && $(this).find(".featured-block__tag").not(":empty")) { $(this).find(".img-fit img").addClass("opacity-pointeight"); — flash
– flash, Commented Mar 12, 2019 at 3:35
ah I see you want to check if this classes didn't exist in this container? correct me if I',m wrong — Beginner
– Beginner, Commented Mar 12, 2019 at 3:39
No, I want to check for these classes inside div.featured-block__item-inner but it should check if there is content inside for both of them i.e condition#1 — flash
– flash, Commented Mar 12, 2019 at 3:43

Murali Nepalli · Accepted Answer · 2019-03-12 03:50:54Z

Pleas try something like this in Javascript unless it must be done in Jquery.

document.querySelectorAll(".featured-block__item-inner").forEach(function(itemInner){ 

 var blockTitle = itemInner.querySelector(".featured-block__content .featured-block__title");
 var blockTag = itemInner.querySelector(".featured-block__content .featured-block__tag");
 var blockImage = itemInner.querySelector(".featured-block__image, .img-fit");

 if(!(blockTitle && blockTag && blockImage)) return;  

 if(blockTitle.innerText = "" && blockTag.innerText="") {
    blockImage.classList.add("default-opacity");
 }
 else if (blockTitle.innerText != "" && blockTag.innerText !="") {
   blockImage.classList.add("opacity-pointseven");
 }
  .....
})

Florenz · Accepted Answer · 2019-03-12 03:56:05Z

You want to check if the element has no content or child elements inside, right?

If that is your problem then you can use this code to get the html content of the element (the output of this code is string)

 $(this).find(".featured-block__title").html()

To check whether its content is empty or not, you can use the condition below

 if ($(this).find(".featured-block__title").html().trim() == "") {
    $(this).find(".img-fit img").addClass("default-opacity");
 }

You can change your script with this one.

<script>
jQuery(function ($) {
    $(".featured-block__item-inner").each(function () {
        if ($(this).find(".featured-block__title").html().trim() == "" && $(this).find(".featured-block__tag").html().trim() == "") {
            $(this).find(".img-fit img").addClass("default-opacity");
        } else if ($(this).find(".featured-block__title").html().trim() != "" && $(this).find(".featured-block__tag").html().trim() != "") {
            $(this).find(".img-fit img").addClass("opacity-pointseven");
        } else if ($(this).find(".featured-block__title").html().trim() != "" && $(this).find(".featured-block__tag").html().trim() == "") {
            $(this).find(".img-fit img").addClass("opacity-pointseven");
        } else if ($(this).find(".featured-block__title").html().trim() == "" && $(this).find(".featured-block__tag").html().trim() != "") {
            $(this).find(".img-fit img").addClass("opacity-pointseven");
        }

    });
})

you can use $(this).find(".featured-block__title").html().length ==0 for better approach
@Florenz I am getting this error TypeError: Cannot read property 'trim' of undefined
@flash you can use this to check if there's no content inside the element if ($(this).find(".featured-block__title").html().length == 0) { //your code here } (this is also based on Negi Rox's comment)

Collectives™ on Stack Overflow

How to check in jQuery if an element has content in it? [duplicate]

2 Answers 2

Comments

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Linked

Related