选择属性为空或未指定的元素

Question

采用以下示意性 html 代码：

<div>
  <span id='1' cust-attr='' />
  <span id='2' />
  <span id='3' cust-attr='Foo' />
</div>

现在我正在寻找一个选择器来查找所有没有属性“cust-attr”或其“cust-attr”值为空的

span

。
在本例中，这将是 1 和 2。

我尝试了以下选择器，结果如下：

1. span[cust-attr!=]

   选择 2 和 3

2. span[cust-attr='']

   只选择1

3. span:not([cust-attr])

   选择2

4. span(:not([cust-attr]),[cust-attr=''])

   选择全部三个

5. span([cust-attr=''],:not([cust-attr]))

   选择1

但是，我没有找到只选择1和2的。
你知道有这种可能性吗？

请注意，我想避免：

span:not([cust-attr]),span[cust-attr='']

因为“跨度”实际上是一个更复杂的表达方式。

Answer 1

聚会迟到了...

...或者您可以使用 CSS 选择器 并且速度比 jQuery 答案快 10 倍...:)

document.querySelectorAll("input:not([id]), input[id='']");

证明

Answer 2

基本上，不要。

将所有逻辑放入选择器中并不是一个好习惯。它最终将在计算上非常昂贵（因为在解释这些部分之前需要从字符串中解析出这些部分）并且很混乱。使用

filter

方法的美妙之处来代替：

$('span')
    .filter(function(){
        return !$(this).attr('cust-attr');
    });

这将从选择中删除

cust-attr

为非空字符串的所有元素。

Answer 3

为什么不先选择所有 SPAN，然后向下过滤选择？例如

$('span').filter('[cust-attr=""],:not([cust-attr])')

Answer 4

对于现代浏览器，您可以使用

:where()

或

:is()

（自 2021 年起广泛提供）

像这样：

span:where([cust-attr=""], :not([cust-attr]))

或者这个：

span:is([cust-attr=""], :not([cust-attr]))

:where()

与

:is()

的唯一区别是特异性

来自MDN

:where() 和 :is() 之间的区别在于 :where() 始终具有 0 特异性，而 :is() 则采用其参数中最具体选择器的特异性。

使用

:where()

不会增加特异性。使用

:is()

将使用最高的选择器特异性。

特异性：

id

>

class

|

attribute

|

pseudo-class

>

element

。

注意：

pesudo-element

选择器在两者中都不起作用（即：

::before

）。

演示

span:where([cust-attr=""], :not([cust-attr])) {
  text-decoration: underline;
}

span:is([cust-attr=""], :not([cust-attr])) {
  color: red;
}

<div>
  <span id='1' cust-attr="">Text 1</span>
  <span id='2'>Text 2</span>
  <span id='3' cust-attr='Foo'>Text 3</span>
</div>