Javascript 选择器忽略给定类中的所有元素_Javascript_Html_Jquery

Javascript 选择器忽略给定类中的所有元素

javascript html jquery

Javascript 选择器忽略给定类中的所有元素,javascript,html,jquery,Javascript,Html,Jquery,我正在尝试选择不在以下div或内的所有元素所以我在下面做了一个选择器，但是它错误地选择了div上面的元素。您知道如何更新选择器以忽略和中的所有元素吗以下是我的html的组织方式： <body> <div> ... </div>  <div class="man

我正在尝试选择不在以下div

或

内的所有元素

所以我在下面做了一个选择器，但是它错误地选择了div上面的元素。您知道如何更新选择器以忽略

和

中的所有元素吗

以下是我的html的组织方式：

<body>
    <div>
        ...
    </div>

    <!-- This element and all below should be ignored/not selected -->
    <div class="manager">
        ...
    </div>

    <!-- This element and all below should be ignored/not selected -->
    <div class="release">
        ...
    </div>
</body>


...
...
...

而不是像这样执行递归遍历：

$('*:not(.release, .manager) *')

您可以简单地执行以下操作：

$('*:not(.release, .manager, .release *, .manager *)')

工作演示：

（注意：我在本演示中使用父类，以排除head和其他标记，因为使用

包含所有内容）

$（'.parent*：非（.release、.manager、.release*、.manager*））
.addClass（“重置位置”）
.reset pos{border:1px实心橙色；padding:5px；margin:5px；}

外部经理和发布
内部经理
内部释放
您可以使用此选择器
$('*:not(.manager):not(.release)') // this will get you the results you want

而且我相信这个选择器会带来你不想要的结果，比如Head，title，meta元素，所以我认为下面的方法会更好
$('body *:not(.manager):not(.release)')

您可以使用xPath和祖先
。工作示例：
<body>
    <div class="outside"><div class="outside__child1"></div></div>
    <!-- This element and all below should be ignored/not selected -->
    <div class="manager"><div class="manager__child"></div></div>
    <!-- This element and all below should be ignored/not selected -->
    <div class="release"><div class="release__child"></div></div>
<script>
    const path = "//div[not(contains(@class, 'manager')) and not(contains(@class, 'release')) and not(ancestor::div[contains(@class, 'manager') or contains(@class, 'release')])]"
    const result = document.evaluate(path, document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null)
    let node = result.iterateNext();
    while(node) {
        console.log(node);
        node = result.iterateNext();
    }
</script>
</body>



const path=“//div[not（包含（@class，'manager'））和not（包含（@class，'release'））和not（祖先：：div[contains（@class，'manager'））或contains（@class，'release'））]”
const result=document.evaluate（路径，文档，null，XPathResult.ORDERED\u节点\u迭代器\u类型，null）
让node=result.iterateNext（）；
while（节点）{
console.log（节点）；
node=result.iterateNext（）；
}

这只打印出div.outside
及其子级，而忽略所有其他子级（我假设您希望忽略容器（div.manager
和div.release
）：
你能在一个片段中重现这个问题吗？$（'*:not（.release.manager）*'）选择器对我来说工作正常，可能我缺少了一些东西。除了里面的元素。manage和。realese？你可以使用这个选择器body>div
<body>
    <div class="outside"><div class="outside__child1"></div></div>
    <!-- This element and all below should be ignored/not selected -->
    <div class="manager"><div class="manager__child"></div></div>
    <!-- This element and all below should be ignored/not selected -->
    <div class="release"><div class="release__child"></div></div>
<script>
    const path = "//div[not(contains(@class, 'manager')) and not(contains(@class, 'release')) and not(ancestor::div[contains(@class, 'manager') or contains(@class, 'release')])]"
    const result = document.evaluate(path, document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null)
    let node = result.iterateNext();
    while(node) {
        console.log(node);
        node = result.iterateNext();
    }
</script>
</body>