jQuery - 如何选择不包含特定元素的元素

Question

我正在尝试选择不包含其他元素的元素。

假设有以下结构：

<div class="wrap">
    <div class="first"></div>
    <div class="second">
        <div class="content">
            <div class="poison-pill"></div>
        </div>
    </div>
</div>

.poison-pill可以出现在任何地方。我需要选择一个带有first或者second类名的div，但只有在它不包含带有poison-pill类名的元素时才能选择。

除了使用过滤器中的函数之外，是否有更加优雅的方法？

$('.first, .second').filter(function(index, element) {
    return $(element).has('.poison-pill').length === 0;
});

我可以考虑使用not函数或:not选择器等方法。

- Jan Krakora

Answer 1

您可以使用.not()与:has选择器一起使用：

$('.first, .second').not(':has(.poison-pill)')

$(function(){
  $('.first, .second').not(':has(.poison-pill)').css('background','green');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
    <div class="first">a</div>
    <div class="second">
        <div class="content">
            <div class="poison-pill">b</div>
        </div>
    </div>
</div>

- Milind Anantwar