获取所有没有某个班级的孩子的父母答案

【问题标题】：Get all parents that don't have a child with a certain class获取所有没有某个班级的孩子的父母
【发布时间】：2018-01-12 03:49:44
【问题描述】：

我想使用 jQuery 选择所有 div 的父级，没有子级 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]))')

但这不起作用。

【问题讨论】：

标签： javascript jquery html arrays jquery-selectors

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

子类并使用 not() 排除锁定类，然后使用父类锁定父类

$(".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>

【讨论】：

【解决方案3】：

另一种选择是在没有locked 子级的myparent 之外使用jquery filter 到filter - 请参见下面的演示：

$('.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>

【讨论】：