选择器忽略给定 class 内的所有元素

Question

我正在尝试 select 不在以下 div <div class="manager"></div>或<div class="release"></div>内的所有元素。

所以我在下面制作了我的选择器，但是它错误地选择了 div 上方的元素。 你知道如何更新我的选择器以忽略<div class="manager"></div>和<div class="release"></div>中的所有元素吗？

$('*:not(.release, .manager) *').filter(function () { 
   return $(this).css('position') == 'fixed';
}).addClass('reset-pos');

这是我的 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>

Answer 1

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

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

你可以简单地做：

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

工作演示：

^{（注意：我在这个演示中使用父 class，排除头部和其他标签，因为使用*包含所有内容）}

 $('.parent *:not(.release, .manager, .release *, .manager *)').addClass('reset-pos');

 .reset-pos { border: 1px solid orange; padding: 5px; margin: 5px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="parent"> <div> <p>Ouside manager & release</p> </div> <!-- This element and all below should be ignored/not selected --> <div class="manager"> <p>Inside manager</p> </div> <!-- This element and all below should be ignored/not selected --> <div class="release"> <p>Inside release</p> </div> </div>

非工作演示：

^{（此演示显示了您的选择器的问题，没有任何父 class ）}

 $('*:not(.release, .manager) *').addClass('reset-pos');

 .reset-pos { border: 1px solid orange; padding: 3px 8px; margin: 4px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <p>Ouside manager & release</p> </div> <!-- This element and all below should be ignored/not selected --> <div class="manager"> <p>Inside manager</p> </div> <!-- This element and all below should be ignored/not selected --> <div class="release"> <p>Inside release</p> </div>

Answer 2

你可以使用这个选择器

$('*:not(.manager):not(.release)') // this will get you the results you want

我也相信这个选择器会带来你不想要的结果，比如 Head、title、meta 元素，所以我认为以下可能会更好

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

Answer 3

您可以使用 xPath 和ancestor 。 工作示例：

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

这仅打印出div.outside及其子项，因为所有其他项都被忽略（我假设您想忽略容器（ div.manager和div.release也）：

选择器忽略给定 class 内的所有元素

问题描述

3 个解决方案

解决方案1
2 2020-06-05 05:47:39

解决方案2
0 2020-06-05 05:49:02

解决方案3
0 2020-06-05 06:07:49

选择器忽略给定 class 内的所有元素

问题描述

3 个解决方案

解决方案1 2 2020-06-05 05:47:39

解决方案2 0 2020-06-05 05:49:02

解决方案3 0 2020-06-05 06:07:49

解决方案1
2 2020-06-05 05:47:39

解决方案2
0 2020-06-05 05:49:02

解决方案3
0 2020-06-05 06:07:49