Question

我试图弄清楚如何检查父div是否有一个没有某个类的子p元素。

所以，例如。

    <div id="one" class="item">
        <p class="A"></p>
        <p class="B"></p>
        <p class="C"></p>
    </div>

    <div id="two" class="item">
        <p class="B"></p>
        <p class="C"></p>
    </div>

如果div没有带有“A”类的p元素，我想隐藏该div。

我该怎么做？

我试过了：

if (jQuery(".item > p.A").length <= 0){
    //run code here
}

但这似乎不起作用

由于

Answer 1

您可以使用jQuery :has()和:not()之类的

$('div:not(:has(p.A))').hide();

$('div:not(:has(p.A))').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="one" class="item">
        <p class="A">A</p>
        <p class="B">B</p>
        <p class="C">C</p>
    </div>

    <div id="two" class="item">
        <p class="B">B</p>
        <p class="C">C</p>
    </div>

或，您可以采用迭代方法

$('div').each(function() {
  if ($(this).has('p.A').length == 0) {
    $(this).hide();
  }
});

$('div').each(function() {

  if ($(this).has('p.A').length == 0) {
    $(this).hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="one" class="item">
  <p class="A">A</p>
  <p class="B">B</p>
  <p class="C">C</p>
</div>

<div id="two" class="item">
  <p class="B">B</p>
  <p class="C">C</p>
</div>

Answer 2

你的jQuery代码应该是：

if ($('.item p').hasClass('A')) {
  // statement
}

Answer 3

您也可以这样做。在我看来，这更好地描述了你正在做的事情，并且在你阅读它时更容易。小提琴：http://jsfiddle.net/ayxdm7y3/

if ($('div').children().hasClass("A")){
   console.log("yes");
}

如何使用jQuery

3 个答案: