当其中一个 p 标签不为空时，隐藏其他 p 标签答案

【问题标题】：When one of the p tag is not empty, hide other p tag当其中一个 p 标签不为空时，隐藏其他 p 标签
【发布时间】：2018-04-26 21:06:57
【问题描述】：

我有这样的结构JSFiddle。

我想要做的是：当类（“折扣”）不为空时，其他3个p标签将被隐藏。当类（“折扣”）为空时，将显示其他 3 个 p 标签。

我一直在努力

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

或

.discount.innerHTML.length != 0

但一切都不起作用。谁能给我一些解决方案？

【问题讨论】：

你的逻辑不是很清楚。所以 - 如果 任何一个 p 标签有内容，你希望 other p 标签被隐藏？（出于好奇，为什么？空的p 标签可以用CSS 设置样式以隐藏...） - 如果多个p 标签有内容怎么办？是否应该所有带有内容的p 标签都可见，而其他没有内容的标签是否应该隐藏？
在上一条评论的基础上，请将“minimal reproducible example”代码发布到问题中here；外部站点中的实时代码是一个奖励，但相关代码必须包含在问题中。

标签： jquery html innerhtml paragraph

【解决方案1】：

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

$(function(){

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

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

【讨论】：

【解决方案2】：

可以这样做：

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

【讨论】：

请注意，这是特定于实例的，因为在内部 jQuery 将遍历每个 .discount 而其他方法仅返回找到的第一个值

【解决方案3】：

这里有一个解决方案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>

错误出现在 jsfiddle 的 .discount.innerHTML.length != 0 行中

这里还有一个解决方案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();
  }
});

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

希望这会对你有所帮助。

【讨论】：

我能理解你的回答，但对于第一个解决方案，我从控制台得到长度为 0，但其他 p 标签仍然没有隐藏......第二个解决方案也没有为我工作
@Sammi 你在找吗，如果.discount长度为0那么p标签会被隐藏？
如果添加另一个 information 块将失败。代码不是特定于实例的