空或不指定属性选择元素

看看下面，简要的HTML代码：空或不指定属性选择元素

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

现在我正在寻找一个选择查找所有span S的要么没有属性“卡斯特 - ATTR “或者其”cust-attr“值为空。
在这种情况下，这将是1和2

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

span[cust-attr!=]选择2和3
span[cust-attr='']仅选择1
span:not([cust-attr])选2
span(:not([cust-attr]),[cust-attr=''])全选三选
span([cust-attr=''],:not([cust-attr]))选择1

但是，我没有找到一个选择只有1和2
你知道的可能？

注意，我想避免：

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

为“跨度”在现实中是一个更复杂的表达式。

来源

2011-04-02 Matthias

你给我们品尝你的复杂表情？ – Zakaria 2011-04-02 15:59:12

请参阅下面的回答评论 - 它用于解析一些第三方HTML。 – Matthias 2011-04-02 16:01:02

基本上不要。

将所有逻辑放入选择器并不好。它最终将会在计算上非常昂贵（因为这些部分在解释之前需要从字符串中解析出来）和混乱。使用filter方法，而不是美：

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

这将删除所有元素，其中cust-attr是从选择一个非空字符串。

来源

2011-04-02 16:11:40 lonesomeday

谢谢！看起来像一个很好，干净的方式。 – Matthias 2011-04-02 16:25:03

呵呵？这可能会比较慢，您在每次迭代中构建一个新的jQuery实例。在更现代的浏览器（那些支持querySelectorAll的浏览器）中选择器会更快。那么，请问，这个['cust-attr']'是错的吗？ – James 2011-04-02 16:37:15

@ J-P'这['cust-attr']'是不可靠的跨浏览器。解决方法是'this ['cust-attr']！= null？这个['cust-attr']：this.getAttribute（'cust-attr'）'，但我没有使用它，因为长度过长。[速度差异不是很大]（http://jsperf.com/cust-attr）。 – lonesomeday 2011-04-02 16:44:00

为什么不直接选择所有的SPAN，然后过滤选择？例如。

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

来源

2011-04-02 16:11:01 James

也谢谢。看起来不错:-) – Matthias 2011-04-02 16:26:26

迟到了......

...或者你可以使用CSS Selectors，并10倍一样快，都jQuery的答案... :)

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

Proof

来源

2015-08-19 16:27:14 JeffC

这绝对是做到这一点的最佳方式。 – Bowofola 2016-08-11 16:59:55

空或不指定属性选择元素

回答

相关问题