web-dev-qa-db-ja.com

jQuery：空でないデータ属性を選択しますか？

空ではない_data-go-to_属性を持つすべての要素を選択しようとしています。

$('[data-go-to!=""]')を試してみましたが、奇妙なことに、ページのすべての要素を選択しているようです。

javascriptjqueryjquery-selectorscustom-data-attribute
86
Shpigford

試してみる

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

更新：

誰もが迷わないようにするために、この答えはjQueryの古いバージョンで機能しますが、将来性はありません。 @gmoと@sivaの回答はどちらも後のバージョンで機能しているように見えるので、私はそれらの回答を延期し（そして、賛成することをお勧めします）....もちろん素晴らしい一日をお過ごしください。

74
Benjamin Oman

さらに参照して、up-to-date （5月14日）（8月15日）（9月16日）（4月17日） （mar'18）...
以下と連携する回答：

空の文字列：

attrmust存在する＆couldは任意の値を持つ（またはまったくなし）

    jQuery("[href]");

欠落している属性：

Ifattrcould存在＆存在する場合、mustは何らかの値を持つ

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

または両方：

Ifattrmust存在する＆には何らかの値が必要です...

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

[〜＃〜] ps [〜＃〜]：もっと組み合わせが可能です...

例については jsFiddle でこのテストを確認してください：

またはここでSO with this Code 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>
168
gmo
$('[data-go-to!=""]:[data-go-to]').each(function() {
    // Do Your Stuff
});​
19
Siva Charan

単純なセレクターについてはわかりませんが、filter()を使用できます。

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

JS Fiddle demo 。

参照：

5
David Thomas

「data-attributename」があり、その値は空ではありません。

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

'data-attributename'が空かどうか：

$('[data-attributename]')

JS Fiddle例

4
Jelgab

documentation によると、これを行う必要があります

:not([attr="value"])

[〜＃〜] demo [〜＃〜]

お役に立てれば

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

[〜＃〜] jsbin [〜＃〜]

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

_:not_、.not()、_:empty_などを使用すると、データ属性ではなく、要素自体が空であるかどうかのみがチェックされます。そのためには、データ属性値に基づいてフィルタリングする必要があります。

[〜＃〜] fiddle [〜＃〜]

2
adeneo

これは私のために働く

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

これを試して ：

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

これは私のために働く：

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