3

假设您有以下 HTML 代码：

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

我想获取所有具有不在div内的data-required属性的元素。因此，在上面的示例中，只会返回第二个输入。.test.class1

我试过了：

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

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

一个 jQuery 选择器可以做到这一点吗？

JSFIDDLE

4

4 回答 4

6

这样做的一种方法：

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

.filter()方法比类似意大利面条的选择器快得多，如果您不想使用.filter()，可能您可以使用这个长而低效的选择器：

$(".test > [data-required], .test :not(.class1) [data-required]");
于 2013-09-15T12:37:50.027 回答
5

使用filter()：

var $inputs = $('.test [data-required]').filter(function() {
    return $(this).closest('.class1').length == 0;
});
于 2013-09-15T12:38:17.573 回答
1

如果要查找的输入始终是.testdiv 的直接子级，则可以使用

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

小提琴 http://jsfiddle.net/wERTv/1/

于 2013-09-15T12:41:54.510 回答
1

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

注意：也不会包含带有data-requiredunder say的元素.class2。

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

工作演示

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

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

工作演示2

于 2013-09-15T12:42:37.150 回答