让所有没有孩子的父母都有一个班。

I want to select all div's of parents using jQuery, that don't have children with the class locked

我想使用jQuery选择所有的div，它们没有锁类的子元素

Example code:

示例代码:

<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>

I feel like I'm really close:

我觉得我真的很亲密:

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

But that does not work.

但这行不通。

3 个解决方案

#1

You can just use class selector, there is no need for attribute selector DEMO

你可以使用类选择器，不需要属性选择器演示

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

Note:- you can do like this too:- $('.myparent:not(:has(.locked))')

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

#2

child class and use not() to exclude locked class then use parent to locked on parent
子类并使用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

Another option is to use jquery filter to filter out the myparent that does not have a locked child - see demo below:

另一种选择是使用jquery过滤器过滤掉没有锁子节点的父节点——参见下面的demo:

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

#1