Question

我有这样的结构JSFiddle。

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

我一直在尝试

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

或

.discount.innerHTML.length != 0

但一切都没有用。任何人都可以给我一些解决方案吗？谢谢！！！

Answer 1

可以这样做：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用解决方案https://jsfiddle.net/0fy0kpc0/1/

＆＃13;

$(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();
  }
});

＆＃13;

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

＆＃13;

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

您可以再使用一个解决方案https://jsfiddle.net/0fy0kpc0/2/

＆＃13;

$(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();
  }
});

＆＃13;

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

＆＃13;

希望这会对你有所帮助。

Answer 3

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

$(function(){

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

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

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

3 个答案: