如何形成适用于 Ands 和 Ors 的查询选择

Posted 2023-05-09

【中文标题】如何形成适用于 Ands 和 Ors 的查询选择

【英文标题】：How to form a Query Select That Works With Ands and Ors

【发布时间】：2017-08-10 07:11:23

【问题描述】：

我有一个类定义如下 htmlElements：

<div class="GM BOLTA 2016" >
<div class="GM BOLTB 2016" >
<div class="GM BOLT 2015" >
<div class="FORD BOLT 2016" >

我希望能够对此进行查询选择器，特别是，我想知道所有具有 GM 的 div 标签，以及任何以 BOLT 开头且不是 2015 年的标签。

我在想类似的事情

[GM][^BOLT]!2015 

但显然是错误的。

【问题讨论】：

如果您想查询 each 类，您可能需要自己的过滤器，因为 querySelector 只能找到与整个 className 字符串相关的数学，即 class="GM SOMEBOLT"也将匹配任何带有 BOLT 等的查询。

^ 如果这不是问题，那么使用 querySelector 最接近的可能是 .querySelectorAll('[class*="GM"][class*="BOLT"]:not([class*="2015"])')

【参考方案1】：

我想知道所有有 GM 的 div 标签，也有任何 以 BOLT 开头，不是 2015 年。

纯 Javascript：

var matches = document.querySelectorAll('.GM, [class^="BOLT"]:not(.2015)');

jQuery：

$('.GM, [class^="BOLT"]:not(.2015)')