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

【问题标题】：jQuery: Select data attributes that aren't empty?jQuery：选择不为空的数据属性？
【发布时间】：2012-05-25 08:33:44
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery jquery-selectors custom-data-attribute

【解决方案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!=""]')

【讨论】：