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

Question

我有这样的结构JSFiddle。

我想做的是：当class("discount")不为空时，隐藏其他3个p标签。当class("discount")为空时，会显示其他3个p标签。

我一直在努力

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

或

.discount.innerHTML.length != 0

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

Answer 1

给你一个解决方案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>

希望对您有所帮助。

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

Answer 3

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

$(function(){

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

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

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

When one of the p tag is not empty, hide other p tag

html

jquery

innerhtml

paragraph