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元素进行iterrate？

Answer 1

您需要更改选择器：

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

就足够了。也许您需要将多个class属性合并为一个。

Answer 2

您在同一元素上不能有多个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()
});

<强>演示

$(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 3

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

修复你的HTML。元素上有多个class属性。

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

Answer 4

1： - 不能使用多个类。 2： - 使用jquery的children方法查找下一个类。

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:01</p>
</div>
<div class="employeeStatus panel-body status-2" >
  <p>Jon</p>
  <p class="isHereSince">06:58</p>
</div>

Js

$（document）.ready（function（）{
$（ '状态-10 '），儿童（'。isHereSince'）隐藏（）。 }）;

如何在jquery

4 个答案: