Question

我在一个网站上工作，我想检查元素中是否包含任何内容。

下面是我的html code。我已经提到 condition＃1 ，其中opacity-pointseven类应通过脚本添加。

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

问题陈述：

我尝试了以下方式，但似乎无法正常工作。

<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

除非必须在Jquery中完成，否则请在Javascript中尝试类似的方法。

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

Answer 2

您要检查元素内部是否没有内容或子元素，对吗？

如果这是您的问题，则可以使用此代码获取元素的html内容（此代码的输出为 string ）

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

要检查其内容是否为空，可以使用以下条件

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

您可以使用此脚本更改脚本。

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

    });
})

如何在jQuery中检查元素中是否包含内容？

2 个答案: