多个 not() DOM 选择器答案

【问题标题】：Multiple not() DOM Selectors多个 not() DOM 选择器
【发布时间】：2013-01-30 20:18:27
【问题描述】：

我想选择一个带有两个 not 子句的特定节点，但到目前为止我没有成功。我需要做的是，选择一个元素，其 div 包含字符串 0008，但它不是 10008，而且它确实 not 包含标签“style”，所以理论上它应该像这样工作：

document.querySelectorAll(" div[id*='0008']:not([id='10008'][style])")

但是，您可能会怀疑，它不是那样工作的。

document.querySelectorAll(" div[id*='0008']:not([id='10008'])")
document.querySelectorAll(" div[id*='0008']:not([style])")

当然，它们都可以完美地单独工作。

【问题讨论】：

【解决方案1】：

不是 10008，也不是……

这不是您当前选择器检查的内容，它会测试它是否没有（id 和样式属性）。改用这个：

div[id*='0008']:not([id='10008']):not([style])

你原来的解决方案也不是一个有效的选择器，因为:not() may only contain one simple selector，而你有两个。然而，像 jQuery 的嘶嘶引擎这样的选择器库可能会support them。因此，使用 jQuery，以下内容也可以：

div[id*='0008']:not([id='10008'],[style])

【讨论】：

【解决方案2】：

jsFiddle Demo

从逻辑上讲，您试图排除匹配两个不需要的选择器中的任何一个的元素，而不是同时匹配它们的元素。在 jQuery 中，multiple selector（它将匹配所有不需要的元素，然后被否定）只是一个逗号分隔的列表。因此，您只需这样做：

$("div[id*='0008']:not([id='10008'],[style])")

来自jQuery docs（因为这个问题被标记为jQuery）：

:not() 内接受所有选择器，例如：:not(div a) 和 :not(div,a)。

【讨论】：

【解决方案3】：

我会这样做：

var elems = $('div[id*="0008"]').filter(function() {
    return !this.hasAttribute("style") && this.id == '10008';
});

我不认为我真的明白这一点，但这会过滤掉：

<div id="10008" style="color: black">10008</div>

但不是：

<div id="10008">10008</div>

ID 当然是唯一的，并且可能有一个真实世界的用例，但它似乎仍然是您通常会以其他方式处理的边缘情况，因为一旦您过滤掉了 ID，为什么你到底需要匹配一个样式标签吗？

【讨论】：