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的{{1}}属性不属于.class1 div的所有元素。因此，在上面的示例中，仅返回第二个输入。

我试过了：

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

Answer 3

如果您要查找的输入始终是.test div的直接子项，则可以使用

$(".test > [data-required]").css("background", "red");

FIDDLE http://jsfiddle.net/wERTv/1/

Answer 4

您可以使用以下内容。它仅选择.test的直接子项。

注意：也不会在data-required之下包含.class2的元素。

$(".test > [data-required]").css("background", "red");

Working Demo

编辑：根据您的进一步说明进行更新。

$(".test [data-required]").each(function() {
   if (!$(this).parents('.class1').length)
       $(this).css('background-color','red');
});

Working Demo2

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

4 个答案: