Javascript jQuery：选择非空的数据属性？

jQuery: Select data attributes that aren't empty?

提问by Shpigford

I'm trying to select all elements that have a data-go-toattribute that is not empty.

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

I've tried $('[data-go-to!=""]')but oddly enough it seems to be selecting every single element on the page if I do that.

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

采纳答案by Benjamin Oman

try

尝试

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

UPDATE:

更新：

For the sake of not leading anyone astray, this answer will work in older versions of jQuery but is not future-proof. Since @gmo and @siva's answers both seem to be working with later versions I defer to (and encourage you to upvote) their answers....and of course hope you have a fantastic day.

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

回答by gmo

Just as further reference, and an up-to-date^{(may'14)(aug'15)(sep'16)(apr'17)(mar'18)(mar'19)(may'20)}...
Answer that works with:

作为进一步的参考，以及最新的^{(may'14) (aug'15) (sep'16) (apr'17) (mar'18) (mar'19)( may'20)}...
答案适用于：

Empty strings:

If the attrmustexist & couldhave any value ^{(or none at all)}

空字符串：

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

    jQuery("[href]");

Missing attributes:

If attrcouldexist & if exist, musthave some value

缺少属性：

如果可以存在&如果存在，必须有一些价值 attr

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

Or both:

If attrmustexist & has to havesome value...

或两者：

如果必须存在并且必须具有一定的价值... attr

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

---

---

^{PS: more combinations are possible...}

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

---

---

Check this test in jsFiddlefor examples:

在jsFiddle 中检查此测试以获取示例：

• jQuery v1.11.0 ->jsFiddle online test
• jQuery v2.1.0 ->jsFiddle online test
• jQuery v2.1.3 ->jsFiddle online test
• jQuery v3.0.0-alpha1 ->jsFiddle online test
• jQuery v3.1.1 Slim ->jsFiddle online test
• jQuery v3.2.1 ->jsFiddle online test
• jQuery v3.3.1 ->jsFiddle online test
• jQuery v3.4.1 ->jsFiddle online test^{Last jQuery version available in jsFiddle at may 28'20}
• jQuery Edge ->jsFiddle online test^{jQuery edge version(use with caution)}

• jQuery v1.11.0 ->jsFiddle online test
• jQuery v2.1.0 ->jsFiddle online test
• jQuery v2.1.3 ->jsFiddle online test
• jQuery v3.0.0-alpha1 ->jsFiddle online test
• jQuery v3.1.1 Slim ->jsFiddle online test
• jQuery v3.2.1 ->jsFiddle online test
• jQuery v3.3.1 ->jsFiddle online test
• jQuery v3.4.1 ->jsFiddle online test^{jsFiddle 中的最新 jQuery 版本于 2020 年 5 月 28 日发布}
• jQuery Edge ->jsFiddle online test^{jQuery edge 版本（慎用）}

---

---

Or here in SO with this Code Snippet.

或者在这里使用此代码片段。

^{* Snippet is running jQuery v2.1.1}

^{* 代码段正在运行 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>

回答by Siva Charan

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

回答by Jelgab

Has 'data-attributename' and its value is not empty:

具有 'data-attributename' 并且其值不为空：

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

Has 'data-attributename' empty or not:

'data-attributename' 是否为空：

$('[data-attributename]')

JS Fiddle example

JS小提琴示例

回答by David says reinstate Monica

I'm not sure about a simple selector, but you could use filter():

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

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

JS Fiddle demo.

JS小提琴演示。

References:

参考：

• filter().

• filter().

回答by Dhiraj

According to the documentationthis should do it

根据文档，这应该这样做

:not([attr="value"])

:not([attr="value"])

DEMO

演示

Hope this helps

希望这可以帮助

回答by Shanimal

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

JSBIN

JSBIN

回答by adeneo

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

Using :not, .not(), :emptyetc will only check if the element itself is empty, not the data attribute. For that you will have to filter based on the data attributes value.

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

FIDDLE

小提琴

回答by Mardok

This works for me

这对我有用

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

回答by V. Kovpak

This works for me:

这对我有用：

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