获取不在具有已知类的元素内的元素

Question

假设您有以下HTML代码:

<div class="test">
    <div class="class1">
        <input type="text" data-required="true"/>
    </div>
    <input type="text" data-required="true"/>
</div>

我想让所有具有data-required属性的元素.test都不在.class1div中.因此,在上面的示例中,仅返回第二个输入.

我试过了:

$(".test [data-required]:not('.class1')")

但它返回两个输入,因为:not不选择父元素.

这可能是一个jQuery选择器？

的jsfiddle

Answer 1

一种方法:

$(".test [data-required]").filter(function() {
   return !$(this).closest('.class1').length;
}).css("background", "red");

.filter()方法比意大利面条般的选择器快得多,如果你不想使用.filter(),可能你可以使用这个长而低效的选择器:

$(".test > [data-required], .test :not(.class1) [data-required]");

Answer 2

用途filter():

var $inputs = $('.test [data-required]').filter(function() {
    return $(this).closest('.class1').length == 0;
});