javascript - 如果元素中有内容,如何在 javascript/jquery中添加类?

  显示原文与译文双语对照的内容
82 2

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

below 是我的html代码。如果类 featured-block__titlefeatured-block__tag 有内容,我已经提到了 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, 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>
时间:原作者:0个回答

116 5

我希望下面的脚本将 heplful 。

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
 } 
});
原作者:
53 5

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

在这个示例中,我将 $('.featured-block__item-inner') 作为父对象,然后查找项目 inside 。

$('.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>
原作者:
74 3

我想你可以在你的代码 .not(":empty") 中编辑一位

<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>
原作者:
63 4

你可以尝试下面的代码,

 $('.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
 }
})
原作者:
...