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

Question

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

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

Answer 1

正如进一步参考， 最新 ^{（可能14） （aug'15） （sep'16） （apr'17）（ mar'18 ） < / SUP> ...
答案适用于：}

  

空字符串：

     

如果 attr 必须 存在＆amp; 可以 有任何值 ^{（或者根本没有）}

    jQuery("[href]");

  

缺少属性：

     

如果 attr 存在＆amp;如果存在， 必须 有一些价值

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

  

或两者：

     

如果 attr 必须 存在＆amp; 必须 一些价值......

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

---

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

---

在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 ^{jsFiddle上可用的最后一个jQuery版本于5月29日18日}
• jQuery Edge -> jsFiddle online test ^{jQuery edge version（谨慎使用）}

---

或者在这里使用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>

Answer 2

试

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

更新：

为了不让任何人误入歧途，这个答案将适用于旧版本的jQuery，但不具备面向未来的能力。由于@gmo和@ siva的答案似乎都适用于以后的版本，我会推迟（并鼓励你提出）他们的答案....当然希望你有一个美好的一天。

Answer 3

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

Answer 4

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

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

JS Fiddle demo

参考文献：

• filter()。

Answer 5

根据documentation 这应该这样做

:not([attr="value"])

DEMO

希望这有帮助

Answer 6

'data-attributename'及其值不为空：

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

'data-attributename'是否为空：

$('[data-attributename]')

JS Fiddle example

Answer 7

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

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

FIDDLE

Answer 8

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

JSBIN

Answer 9

这对我有用

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

Answer 10

试试这个：

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

Answer 11

这对我有用：

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