jQuery: Select data attributes that aren't empty?

Question

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

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

gmo · Answer 1 · 2022-01-10T11:11:59.937

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

###Empty strings: If the attr must exist & could have any value ^{(or none at all)}

    jQuery("[href]");

###Missing attributes: If attr could exist & if exist, must have some value

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

###Or both: If attr must exist & has to have some value...

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

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

###Check this test in jsFiddle for examples:

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 ^{Last jQuery version available in jsFiddle at jan 10'22}
jQuery Edge -> jsFiddle online test ^{jQuery edge version (use with caution)}
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 ^{Last jQuery Slim version available in jsFiddle at jan 10'22}

###Or here in SO with this Code Snippet.
^{* Snippet is running 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>

this is it. Upvote this user right here. the other older answers are not working for me. I used the third example. — Valamas, Jun 19 '14 at 05:41
This is the one which is working. `$(':not([data-go-to=""])')` is not working anymore — Matthieu Charbonnier, Nov 03 '15 at 10:13
Your solution is better and safer (last solution worked for me thank you very much) — Olivier Pons, Dec 18 '15 at 13:09
jquery v2.2.0 '.check-box[data-field]:not([data-field=""])' works for me but not '.check-box[data-field][data-field!=""])' — mattpm, Sep 16 '19 at 22:19

Benjamin Oman · Accepted Answer · 2015-03-11T19:31:52.203

80

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.

edited Mar 11 '15 at 19:31

answered May 17 '12 at 18:20

Benjamin Oman

1,654
1
17
19

thanks, this worked great! I wanted to select only image elements, so I added $(':not(img[data-go-to==""]') – msanjay Jul 04 '12 at 07:34
2

Does this not select all elements that don't have a blank 'data-to-go' attribute? When the asker wants all elements with that attribute that are not blank? (as Siva Charan's answer resolves) – rodnaph Sep 06 '13 at 09:21
don't really need any double quotes either... as in `$('element:not([attribute=])'); // gets all of ` or `$(':not([attribute=])'); // gets all of <* attribute="">` – Anthony Hatzopoulos Mar 21 '14 at 01:24
2

This gets every element for me, including the one that has the data-attribute I'm looking for – May 29 '14 at 16:34
Doesn't seem to work in Safari but `$('[data-go-to!=""]:[data-go-to]')` does. – Dan Mar 02 '15 at 20:56
Can't make this working with jquery 1.10 (it founds 100+ results where I want only one) but gmo answer below is working ( `$("[data-go-to!=''][data-go-to]")` ) – Matthieu Charbonnier Nov 03 '15 at 10:21
why not future proof? – Simon_Weaver May 23 '17 at 20:30

score 20 · Answer 3 · answered May 17 '12 at 18:28

20

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

answered May 17 '12 at 18:28

Siva Charan

17,940
9
60
95

6

This one works for empty strings and missing attributes, perfect – adamJLev Jul 20 '12 at 10:47
4

as of May'14 doesn't work, gives `Unrecognized Expression` error. – coding_idiot May 29 '14 at 17:46

Jelgab · Answer 4 · 2014-07-30T21:22:24.210

9

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

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

Has 'data-attributename' empty or not:

$('[data-attributename]')

JS Fiddle example

edited Jul 30 '14 at 21:22

answered Jul 30 '14 at 18:02

Jelgab

1,840
19
12

1

This is the only answer that still works for me in June 2015. – AlexioVay Jun 02 '15 at 18:45

David Thomas · Answer 5 · 2012-05-17T18:23:38.557

5

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

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

JS Fiddle demo.

References:

filter().

edited May 17 '12 at 18:23

answered May 17 '12 at 18:18

David Thomas

249,100
51
377
410

Dhiraj · Answer 6 · 2012-05-17T18:26:03.657

4

According to the documentation this should do it

:not([attr="value"])

DEMO

Hope this helps

edited May 17 '12 at 18:26

answered May 17 '12 at 18:19

Dhiraj

33,140
10
61
78

score 3 · Answer 7 · answered Jul 17 '14 at 22:40

3

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

JSBIN

answered Jul 17 '14 at 22:40

Shanimal

11,517
7
63
76

adeneo · Answer 8 · 2012-05-17T18:36:35.007

2

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

Using :not, .not(), :empty etc 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.

FIDDLE

edited May 17 '12 at 18:36

answered May 17 '12 at 18:24

adeneo

312,895
29
395
388

score 1 · Answer 9 · answered Oct 08 '14 at 06:56

1

This works for me

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

answered Oct 08 '14 at 06:56

Mardok

624
8
18

These are two iterations though. – Jens Jul 06 '20 at 00:04

score 0 · Answer 10 · answered May 17 '12 at 18:19

0

Try this :

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

answered May 17 '12 at 18:19

Pascal Boutin

1,220
2
9
22

1

No go. `"Syntax error, unrecognized expression: [data-go-to:not(:empty)]"` – Shpigford May 17 '12 at 18:19
http://api.jquery.com/empty-selector/ http://api.jquery.com/not-selector/ According to this, would be suppose to work, sad, that would have been a clean solution ! – Pascal Boutin May 17 '12 at 18:23

score 0 · Answer 11 · answered Jan 14 '15 at 13:15

0

This works for me:

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

answered Jan 14 '15 at 13:15

cn007b

16,596
7
59
74

jQuery: Select data attributes that aren't empty?

11 Answers11

Linked

Related