获取所有 parents 没有 child 的 class

Question

我想 select parents 的所有 div 使用 jQuery，没有 children 和 class locked

示例代码：

<div class='myparent'>
    <div class='mychild locked'></div>
</div>
<div class='myparent'>
    <div class='mychild locked'></div>
</div>
<div class='myparent'>
    <div class='mychild'></div>
</div>

我觉得我真的很亲近：

$('div.myparent:not(:has(div[class=locked]))')

但这不起作用。

Answer 1

你可以只使用class选择器，不需要属性选择器DEMO

$('.myparent:not(:has(div.locked))')

注意：- 你也可以这样做：- $('.myparent:not(:has(.locked))')

Answer 2

child class 并使用 not() 排除锁定 class 然后使用 parent 锁定 parent

$(".mychild:not(.locked)").parent().css("color","red")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='myparent'>
    <div class='mychild locked'>1</div>
</div>
<div class='myparent'>
    <div class='mychild locked'>2</div>
</div>
<div class='myparent'>
    <div class='mychild'>3</div>
</div>

Answer 3

另一种选择是使用 jquery filter 来 filter 出没有 locked child 的 myparent - 请参见下面的演示：

$('.myparent').filter(function(){
  return !$(this).find('.locked').length;
}).css('color','blue');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='myparent'>
    <div class='mychild locked'>one</div>
</div>
<div class='myparent'>
    <div class='mychild locked'>two</div>
</div>
<div class='myparent'>
    <div class='mychild'>three</div>
</div>

获取所有 parents 没有 child 的 class

Get all parents that don't have a child with a certain class

html

javascript

arrays

jquery

jquery-selectors