如何在jquery中隐藏特定类上的元素

Question

我寻找一个在特定类中隐藏元素的解决方案。

<div class="employeeStatus" class="panel-body status-1">
  <p>Mark</p>
  <p class="isHereSince">08:15</p>
</div>
<div class="employeeStatus" class="panel-body status-10">
  <p>Ben</p>
  <p class="isHereSince">10:01</p>
</div>
<div class="employeeStatus" class="panel-body status-2">
  <p>Jon</p>
  <p class="isHereSince">06:58</p>
</div>

如果存在状态-10，只需使用<p>隐藏class=isHereSince元素。

我试过这样的方法：

$("document").ready(function(){
  if($(".employeeStatus").hasClass('status-10')) {
    $('.isHereSince').hide();
  }
});

但这不管用。我必须迭代div元素吗？

Answer 1

在相同的元素上不能有多个class=""，修复后只需使用$(".employeeStatus.status-10 .isHereSince").hide()

<div class="employeeStatus panel-body status-10">
  <p>Ben</p>
  <p class="isHereSince">10:01</p>
</div>

$(document).ready(function() {
  $(".employeeStatus.status-10 .isHereSince").hide()
});

Demo

​

$(document).ready(function() {
  $(".employeeStatus.status-10 .isHereSince").hide()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="employeeStatus" class="panel-body status-1">
  <p>Mark</p>
  <p class="isHereSince">08:15</p>
</div>
<div class="employeeStatus panel-body status-10">
  <p>Ben</p>
  <p class="isHereSince">10:01</p>
</div>
<div class="employeeStatus panel-body status-2">
  <p>Jon</p>
  <p class="isHereSince">06:58</p>
</div>
if the there is a status-10 just hide the
<p> element with the class=isHereSince I have tried something like this:

​

Answer 2

你需要改变你的选择器：

$(".employeeStatus.status-10 .isHereSince").hide();

就够了。也许您需要将多个class属性组合到一个属性中。

Answer 3

因为有多个类isHereSince，所以您需要隐藏它的内部p标记。而且，您也不需要使用hasClass。

然后修正你的html。元素上有多个类属性。

<div class="employeeStatus panel-body status-1">
  <p>Mark</p>
  <p class="isHereSince">08:15</p>
</div>
<div class="employeeStatus panel-body status-10">
  <p>Ben</p>
  <p class="isHereSince">10:011</p>
</div>
<div class="employeeStatus panel-body status-2">
  <p>Jon</p>
  <p class="isHereSince">06:58</p>
</div>

JS

$(document).ready(function(){
   $('.employeeStatus.status-10 .isHereSince').hide();
});