Question

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

以下是我的html代码。 仅在此处添加注释的地方应通过脚本添加opacity-pointseven类。

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

对于空元素，我正在通过以下方式进行检查：

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

问题陈述：

我想知道不为空的元素，我需要在上面的脚本中进行哪些更改。这就是我尝试过的。我使用的是is而不是not，但似乎不起作用。

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

Answer 1

为此，您使用.not(":empty")

Answer 2

您要检查is not是否为空-不要使用is，只需使用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");
        }
    });
})

如何在Javscript / Jquery中检查元素中是否没有内容？

2 个答案: