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

问题描述 投票:0回答:4

采用以下示意性 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='']

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

javascript jquery html css-selectors
4个回答
15
投票

聚会迟到了...

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

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

证明


6
投票

基本上,不要。

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

filter
方法的美妙之处来代替:

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

这将从选择中删除

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


4
投票

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

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

0
投票

对于现代浏览器,您可以使用
: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>

© www.soinside.com 2019 - 2024. All rights reserved.