Question

我正在一个wordpress / php网站上工作，如果子类中没有内容，我想在其中添加一个类。

格式化的HTML：

<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 class="default-opacity" src="" data-fallback-img="" alt="">
         </figure>
      </div>
   </a>
   <a href="/" class="featured-block__item cf">
      <div class="featured-block__item-inner">
         <figure class="featured-block__image img-fit">
            <img class="default-opacity" src="" data-fallback-img="" alt="">
         </figure>
      </div>
   </a>
   <!-- -->
   <a href="/149553/" class="featured-block__item cf">
      <div class="featured-block__item-inner">
         <figure class="featured-block__image img-fit">  // It should be added here only
            <img src="" srcset="">      
         </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="" 
         </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>

这是我在jQuery中使用的逻辑，但是由于在各处添加类，因此似乎无法正常工作。应该在我评论过的地方添加 //应该只在这里添加

jQuery(function($) {
    if ($(".featured-block__title").is(":empty") && $(".featured-block__tag").is(":empty")) {
        $(".img-fit").addClass("opacity-pointseven");
    }
})

问题陈述：

我想知道我需要在上面的jQuery代码中进行哪些更改，以便仅在没有内容子元素的位置添加类。

Answer 1

您需要遍历父项，并且仅在该元素内查询。就目前而言，您的每个查询都会应用于整个文档。

您可能想使用each()方法来遍历各节，并仅使用this参数在该节中查询。像这样：

$('.featured-block__item').each(function() {
  if ($(".featured-block__title", this).is(":empty") && $(".featured-block__tag", this).is(":empty")) {
    $(this).find(".img-fit").addClass("opacity-pointseven")
  }
})

.img-fit.opacity-pointseven {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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 class="default-opacity" src="" data-fallback-img="" alt="">
         </figure>
      </div>
   </a>
   <a href="/" class="featured-block__item cf">
      <div class="featured-block__item-inner">
         <figure class="featured-block__image img-fit">
            <img class="default-opacity" src="" data-fallback-img="" alt="">
         </figure>
      </div>
   </a>
   <!-- -->
   <a href="/149553/" class="featured-block__item cf">
      <div class="featured-block__item-inner">
         <figure class="featured-block__image img-fit">  // It should be added here only
            <img src="" srcset="">      
         </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="" 
         </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>

Answer 2

不需要jquery。

if (
  document.querySelector('.featured-block__title > *').length === 0 &&
  document.querySelector('.featured-block__tag > *').length === 0
) {
  // add class here
}

Answer 3

下午好，这可能是您尝试测试是否为空的方法。试试这个：

// Checks if div is empty, Uses trim to prevent unwanted spaces
if ( $.trim( $('.featured-block__title').text() ).length == 0 ) {
   // If empty add class to element
   $(".img-fit").addClass("opacity-pointseven");
}

玩得开心！

当html元素内没有内容时，如何在jQuery中添加类？

3 个答案: