如果元素中包含内容，如何在Javascript / jQuery中添加类？ [英] How to add a class in Javascript/jQuery if an element has content in it?

问题描述

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

I am working on a website in which I want to check whether element has any content in it.

下面是我的html代码。我已经提到条件＃1 ，其中 opacity-pointseven 类应该通过脚本添加，如果类 featured-block__title 和 featured-block__tag 包含内容。

Below is my html code. I have mentioned condition#1 where opacity-pointseven class should be added through script if classes featured-block__title and featured-block__tag have content in it.

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

问题陈述：

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

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>

推荐答案

您可以遍历父div并查找子项然后在那里添加课程。

You can loop over parent div and find the child items and then add the class over there.

在这个示例中，我得到 $（'。featured-block__item-inner'）作为父母，然后在其中查找项目。

Here in the example, I am getting $('.featured-block__item-inner') as a parent and then finding items inside it.

$('.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>

这篇关于如果元素中包含内容，如何在Javascript / jQuery中添加类？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！