代码之家 › 专栏 › 技术社区 › Sammi

当其中一个p标记不为空时,隐藏另一个p标记

paragraph innerhtml html jquery

-1

Sammi · 技术社区 · 7 年前

我有这样的结构 JSFiddle .

我想做的是:当类(“折扣”)不为空时,其他3个p标记将被隐藏。当类别(“折扣”)为空时,将显示其他3个p标签。

if($('.discount).is(':not("empty)'))

或

.discount.innerHTML.length != 0

3 回复 | 直到 5 年前

charlietfl 7 年前

可以按以下方式执行:

$('.discount').not(':empty').parent().siblings().hide()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Info 1</h4>
<div class="information">
  <p class="s">
    <em class="discount">DISCOUNT PROMOTION</em>
  </p>
  <p class="s">
    Title
  </p>
  <p class="s">
    Name
  </p>
  <p class="s">
    Detail
  </p>
  
</div>

<h4>Info 2</h4>
<div class="information">
  <p class="s">
    <em class="discount"></em>
  </p>
  <p class="s">
    Title
  </p>
  <p class="s">
    Name
  </p>
  <p class="s">
    Detail
  </p>
  
</div>

<h4>Info 3</h4>
<div class="information">
  <p class="s">
    <em class="discount">DISCOUNT PROMOTION</em>
  </p>
  <p class="s">
    Title
  </p>
  <p class="s">
    Name
  </p>
  <p class="s">
    Detail
  </p>
  
</div>

Shiladitya 7 年前

给你一个解决方案 https://jsfiddle.net/0fy0kpc0/1/

$(function(){
  if($('.discount').html().length){
   console.log("yeah!")
   $('.information p:nth-child(2)').hide();
   $('.information p:nth-child(3)').hide();
   $('.information p:nth-child(4)').hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="information">
  <p class="s">
    <em class="discount">DISCOUNT PROMOTION</em>
  </p>
  <p class="s">
    Title
  </p>
  <p class="s">
    Name
  </p>
  <p class="s">
    Detail
  </p>
  
</div>

错误发生在 .discount.innerHTML.length != 0 JSFIDLE中的行

给你另一个解决方案 https://jsfiddle.net/0fy0kpc0/2/

$(function(){
  if (!$('.discount').is(':empty')){
    console.log("yeah!")
    $('.information p:nth-child(2)').hide();
    $('.information p:nth-child(3)').hide();
    $('.information p:nth-child(4)').hide();
  }
});

<脚本src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“>lt;/script>
<div class=“信息”>
<em class=“折扣”>折扣促销</em>
</p>
<p class=“s”>
标题
</p>
<p class=“s”>
名称
</p>
细节
</p>

</div>

A.D. 7 年前

尝试使用 :not() 和 :has() 选择器:

$(function(){

 if($('.discount').text().length != 0)
 {

   $("p:not(:has(>em))").hide();
    }
});

推荐文章

Marc · 如何替换超时内的文本

2 年前

David Solé González · 动态创建的HTML不会重新加载

7 年前

pjk_ok · 将所有For循环数组值打印到内部HTML

7 年前

Martin Fric · JavaScript QuerySelect所有类名innerHTML[重复]

7 年前

yrb · innerHTML无法在javascript中检查php回显字符串

7 年前

Shajal Kumer · JavaScript-当存储在一个数组中的两个值相同时,如何使用print函数输出这些值?

7 年前

Sammi · 当其中一个p标记不为空时,隐藏另一个p标记

7 年前

Adam · JS | Onload和Onclick不能一起工作-快速解决方案?

7 年前

basement · 将字符串注入innerHTML时,无法正确解释HTML

7 年前

djlowz · 脚本以更改元素。风格DOM中的颜色

7 年前