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.

Enunciate

Answer 1

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.

Deprave

thanks, this worked great! I wanted to select only image elements, so I added $(':not(img[data-go-to==""]') – Freightage

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) – Crosspollination

don't really need any double quotes either... as in $('element:not([attribute=])'); // gets all of <element attribute=""> or $(':not([attribute=])'); // gets all of <* attribute=""> – Mendelian

This gets every element for me, including the one that has the data-attribute I'm looking for – Pertinacity

Doesn't seem to work in Safari but $('[data-go-to!=""]:[data-go-to]') does. – Tried

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]") ) – Refluent

why not future proof? – Diabolo

Answer 2

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>

Kinslow

this is it. Upvote this user right here. the other older answers are not working for me. I used the third example. – Chaperon

This is the one which is working. $(':not([data-go-to=""])') is not working anymore – Refluent

Your solution is better and safer (last solution worked for me thank you very much) – Keary

jquery v2.2.0 '.check-box[data-field]:not([data-field=""])' works for me but not '.check-box[data-field][data-field!=""])' – Rabbet

Answer 3

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

Undermanned

This one works for empty strings and missing attributes, perfect – Creamcolored

as of May'14 doesn't work, gives Unrecognized Expression error. – Considering

Answer 4

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

Akeyla

This is the only answer that still works for me in June 2015. – Mcclung

Answer 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().

Bathy

Answer 6

According to the documentation this should do it

:not([attr="value"])

DEMO

Hope this helps

Hydrangea

Answer 7

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

JSBIN

Mccall

Answer 8

$('[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

Girlie

Answer 9

This works for me

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

Zonation

These are two iterations though. – Hinojosa

Answer 10

Try this :

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

Deci

No go. "Syntax error, unrecognized expression: [data-go-to:not(:empty)]" – Enunciate

api.jquery.com/empty-selector api.jquery.com/not-selector According to this, would be suppose to work, sad, that would have been a clean solution ! – Deci

Answer 11

This works for me:

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

Kwa