0

猜测以下 HTML DOM 的正文片段：

...
<div class="entry">
    <div class="evil">
        <div class="some-other-class">
            <pre>My foo text</pre>
        </div>
    </div>
</div>
<div class="entry">
    <div class="nice">
        <pre>My nice text</pre>
    </div>
</div>
...

使用 jQuery，我想选择所有<pre>属于 type 的父元素div.entry并且不是 a 的后代的元素div.evil。更准确地说：我只想将特定类应用于那些“非邪恶”<pre>元素。

在应用类之前，我使用了:not选择器过滤器以及.not()构建链以选择适当的子集和后代元素的方法，如下所示：

$("div.entry div:not(.evil) pre").addClass("pretty");

或者：

$("div.entry").not("div.evil").find("pre").addClass("pretty")

这两种变体都会匹配所有pre元素，包括带有“邪恶”父 div 的元素！

但是，当我像这样选择直接父级和类时：

$("div.entry div:not(.some-other-class) > pre").addClass("pretty");

它按预期工作。首先，我以为我误解了使用element1 element2. 使用链式过滤器方法没有成功，但证明肯定有其他问题。

这个问题本身听起来并不难，但它现在让我发疯了。

如果以及为什么我的选择方式可能是错误的，有什么想法吗？

4

3 回答 3

3

把事情简单化：

$('div.entry pre:not(div.evil pre)');

给你：jsfiddle 演示

笔记

所以为什么

$("div.entry div:not(.evil) pre");

不工作？

当你要求 时div:not(.evil)，jQuery 的人会返回你div.some-other-class以及div.nice，所以最终的选择器将是：

$("div.entry div.some-other-class pre, div.entry div.nice pre");

哪个匹配甚至pre哪个是坏的后裔，坏的，div.evil！

于 2012-10-19T18:53:59.927 回答
3

我建议：

$('div.entry pre').filter(function(){
    return !$(this).closest('div.evil').length
});

JS 小提琴演示。

对我来说，优点是您只需选择所有 pre元素，然后根据（相当）简单的父评估减少这些元素。替代方法也同样有效，这只是……我个人的偏好。

于 2012-10-19T18:49:45.510 回答
2

您可以使用:has选择器：

$("div.entry:not(:has(.evil)) pre").addClass("pretty");

http://jsfiddle.net/7BNQN/

或者：

$('div.entry').not(':has(.evil)').find('pre').addClass("pretty");
于 2012-10-19T18:49:58.087 回答