0

HTMLDOMの次の本文スニペットを推測します。

...
<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>
...

<pre>jQueryを使用して、タイプの親要素に属し、の子孫ではないdiv.entryすべての要素を選択したいと思います。より正確には、特定のクラスをそれらの「非悪」要素にのみ適用したいと思います。div.evil<pre>

次に示すように、クラスを適用する前に、:notセレクターフィルタと、.not()適切なサブセットと子孫要素を選択するためのチェーンを構築する方法を使用しました。

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

そして代わりに：

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

両方のバリアントにより、「邪悪な」親divを持つ要素を含むすべての要素が一致します。pre

ただし、次のように直接の親とクラスおよび子を選択すると、次のようになります。

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

期待どおりに動作します。最初は、を使用した子孫要素の選択を誤解していると思いelement1 element2ました。連鎖フィルター法を使用しても成功しなかったが、他の何かが間違っているに違いないことが証明された。

問題自体は難しいようには聞こえませんが、今では私を悩ませています。

私の選択方法が間違っている可能性がある場合、そしてその理由はありますか？

4

3 に答える 3

3

私は提案します：

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

JSフィドルデモ。

私にとっての利点は、すべての 要素を選択preし、（かなり）単純な親の評価に基づいてそれらの要素を減らすことです。別のアプローチも同様に機能します。これは...私の個人的な好みです。

于 2012-10-19T18:49:45.510 に答える
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 に答える
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 に答える