如果元素中有内容，如何在 Javascript/jQuery 中添加类？答案

【问题标题】：How to add a class in Javascript/jQuery if an element has content in it?如果元素中有内容，如何在 Javascript/jQuery 中添加类？
【发布时间】：2019-03-12 04:29:38
【问题描述】：

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

以下是我的 html 代码。我已经提到了 condition#1，如果 featured-block__title 和 featured-block__tag 类中有内容，则应该通过脚本添加 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, where opacity-pointseven needs to be added)
         </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>

【问题讨论】：

标签： javascript jquery html class

【解决方案1】：

您可以遍历父 div 并找到子项，然后在那里添加类。

在示例中，我将 $('.featured-block__item-inner') 作为父级，然后在其中查找项目。

$('.featured-block__item-inner').each(function() {
  if ($(this).find(".featured-block__title").not(":empty").length > 0 && $(this).find(".featured-block__tag").not(":empty").length > 0) {
    $(this).find(".img-fit img").addClass("opacity-pointseven"); // For condition#1
  } else {
    $(this).find(".img-fit img").addClass("default-opacity");
  }
})

.opacity-pointseven {
  width: 100px;
  height: 100px;
}

.default-opacity {
  width: 50px;
  height: 50px;
}

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

    <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"></h1>
        <h1 class="featured-block__tag"> More Coverage</h1>
      </div>
    </div>
  </a>
</div>

【讨论】：

我也是这样做的。
听起来不错，我有一个简单的问题。当featured-block__title和featured-block__tag类里面没有内容时，脚本应该是这样的jsfiddle.net/j0evb72y
@flash 我想使用 else 条件来处理。检查我编辑的代码。
看起来不错，但我想知道我的小提琴是否有任何错误？你的 else 语句看起来非常好。
@flash 当您知道自己想要做什么时，无需检查两次。你的小提琴没有问题。您可以使用 else 添加备用类

【解决方案2】：

我希望下面的脚本会有所帮助。

jQuery(function ($) {
    if ($(".featured-block__title").text().length != 0 && jQuery('.featured-block__tag').text().length != 0 ) {
        $(".img-fit img").addClass("opacity-pointseven");  // For condition#1
    } 
});

【讨论】：

【解决方案3】：

我认为您可以在代码中进行一些编辑 .not(":empty") 到 .html()

<script>
    jQuery(function ($) {
        if ($(this).find(".featured-block__title").html() && $(this).find(".featured-block__tag").html()) {
                $(this).find(".img-fit img").addClass("opacity-pointseven");  // For condition#1
            } 

        });
    })
</script>

【讨论】：

【解决方案4】：

<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, where opacity-pointseven needs to be added)
         </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 ($(".featured-block__title").html() != undefined && $(".featured-block__title").html() != "" && $(".featured-block__tag").html() != undefined && $(".featured-block__tag").html() != "") {
                $(".featured-block__tag").addClass("opacity-pointseven");  // For condition#1
            } 

        });
    })
</script>

以上是您提供的代码的更改。在 jquery 中，您可以直接查找类或 Id，而无需使用 this 对象。这仅在您循环某些特定元素时需要（即在 Div 循环内）。

【讨论】：