jQuery：选择不为空的数据属性？

Posted 2023-03-05

【中文标题】jQuery：选择不为空的数据属性？

【英文标题】：jQuery: Select data attributes that aren't empty?

【发布时间】：2012-05-25 08:33:44

【问题描述】：

我正在尝试选择所有具有非空data-go-to 属性的元素。

我已经尝试过$('[data-go-to!=""]')，但奇怪的是，如果我这样做，它似乎会选择页面上的每一个元素。

【参考方案1】：

作为进一步的参考，最新的 ^{(may'14) （2015 年 8 月） （2016 年 9 月） （17 年 4 月） （18 年 3 月） （3 月'19) (20 年 5 月) (jan'22)}... 适用的答案：

###空字符串： 如果attr 必须存在并且可以有任何值 ^{（或根本没有）}

    jQuery("[href]");

###缺少属性： 如果attr 可以存在并且如果存在，必须有一些价值

    jQuery("[href!='']");

###或两者兼有： 如果attr 必须存在并且必须有一些价值......

    jQuery("[href!=''][href]");

---

^{PS：更多组合是可能的...}

---

###在jsFiddle 中查看此测试示例：

jQuery v1.9.1 ->jsFiddle online test jQuery v1.11.0 ->jsFiddle online test jQuery v2.1.0 ->jsFiddle online test jQuery v2.1.3 ->jsFiddle online test jQuery v2.2.4 ->jsFiddle online test jQuery v3.2.1 ->jsFiddle online test jQuery v3.3.1 ->jsFiddle online test jQuery v3.4.1 -> jsFiddle online test ^{1 月 10 日 22 日在 jsFiddle 中提供的最后一个 jQuery 版本} jQuery Edge ->jsFiddle online test ^{jQuery edge version（谨慎使用）} jQuery v3.0.0-alpha1 ->jsFiddle online test jQuery v3.1.1 Slim ->jsFiddle online test jQuery v3.2.1 Slim ->jsFiddle online test jQuery v3.3.1 Slim ->jsFiddle online test jQuery v3.4.1 Slim -> jsFiddle online test ^{1 月 10 日 22 日在 jsFiddle 中提供的最后一个 jQuery Slim 版本}

---

###Or here in SO with this Code Snippet.^{* Snippet 正在运行 jQuery v2.1.1}

jQuery('div.test_1 > a[href]').addClass('match');
jQuery('div.test_2 > a[href!=""]').addClass('match');
jQuery('div.test_3 > a[href!=""][href]').addClass('match');

div,a 
    display: block;
    color: #333;
    margin: 5px;
    padding: 5px;
    border: 1px solid #333;

h4 
    margin: 0;

a 
    width: 200px;
    background: #ccc;
    border-radius: 2px;
    text-decoration: none;

a.match 
    background-color: #16BB2A;
    position: relative;

a.match:after 
    content: 'Match!';
    position: absolute;
    left: 105%;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test_1">
    <h4>Test 1: jQuery('a[href]')</h4>
    <a href="test">href: test</a>
    <a href="#">href: #</a>
    <a href="">href: empty</a>
    <a>href: not present</a>
</div>
<div class="test_2">
    <h4>Test 2: jQuery('a[href!=""]')</h4>
    <a href="test">href: test</a>
    <a href="#">href: #</a>
    <a href="">href: empty</a>
    <a>href: not present</a>
</div>
<div class="test_3">
    <h4>Test 3: jQuery('a[href!=""][href]')</h4>
    <a href="test">href: test</a>
    <a href="#">href: #</a>
    <a href="">href: empty</a>
    <a>href: not present</a>
</div>

【讨论】：

就是这样。在此处为该用户投票。其他较旧的答案对我不起作用。我用了第三个例子。

第二个@Valamas-AUS

编辑：添加了 SO 代码片段，因此您可以在此处对其进行测试。

这是一个正在工作的。 $(':not([data-go-to=""])') 不再工作了

感谢您及时更新答案

【参考方案2】：

试试

$(':not([data-go-to=""])')

更新：

为了不让任何人误入歧途，这个答案将适用于旧版本的 jQuery，但不是面向未来的。由于@gmo 和@siva 的答案似乎都适用于更高版本，因此我尊重（并鼓励您投票）他们的答案....当然希望您度过美好的一天。

【讨论】：

谢谢，效果很好！我只想选择图像元素，所以我添加了 $(':not(img[data-go-to==""]')

这不会选择所有没有空白'data-to-go'属性的元素吗？当提问者想要所有具有该属性且不为空的元素时？ （正如 Siva Charan 的回答所解决的那样）

实际上也不需要任何双引号...如$('element:not([attribute=])'); // gets all of <element attribute=""> 或$(':not([attribute=])'); // gets all of <* attribute="">

这将为我获取所有元素，包括具有我正在寻找的数据属性的元素

在 Safari 中似乎不起作用，但 $('[data-go-to!=""]:[data-go-to]') 可以。

【参考方案3】：

$('[data-go-to!=""]:[data-go-to]').each(function() 
    // Do Your Stuff
);​

【讨论】：

这个适用于空字符串和缺少属性，完美

截至 2014 年 5 月不起作用，给出 Unrecognized Expression 错误。

【参考方案4】：

有'data-attributename'并且它的值不为空：

$('[data-attributename]:not([data-attributename=""])')

'data-attributename' 是否为空：

$('[data-attributename]')

JS Fiddle example

【讨论】：

这是 2015 年 6 月对我仍然有效的唯一答案。

【参考方案5】：

我不确定一个简单的选择器，但你可以使用filter()：

$('[data-go-to]').filter(
    function()
        return ($(this).attr('data-go-to').length > 0);
    );

JS Fiddle demo.

参考资料：

filter()。

【参考方案6】：

根据documentation 应该这样做

:not([attr="value"])

DEMO

希望对你有帮助

【参考方案7】：

$('[data-go-to]:not([data-go-to=""])')

JSBIN

【参考方案8】：

$('[data-go-to]').filter(function() 
    return $(this).data('go-to')!="";
);

使用:not、.not()、:empty等只会检查元素本身是否为空，而不是数据属性。为此，您必须根据数据属性值进行过滤。

FIDDLE

【参考方案9】：

这对我有用

$('[attributename]').filter('[attributename!=""]')

【讨论】：

不过这是两次迭代。

【参考方案10】：

试试这个：

$('[data-go-to:not(:empty)]')

【讨论】：

不行。 "Syntax error, unrecognized expression: [data-go-to:not(:empty)]"

api.jquery.com/empty-selector api.jquery.com/not-selector 据此，应该可以工作，可悲的是，这将是一个干净的解决方案！

【参考方案11】：

这对我有用：

$('.data .title td[data-field!=""]')