javascript – jQuery: Select data attributes that aren't empty?-ThrowExceptions

Exception or error:

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.

How to solve:




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.


Just as further reference, and an up-to-date (may’14) (aug’15) (sep’16) (apr’17) (mar’18)
Answer that works with:

Empty strings:

If the attr must exist & could have any value (or none at all)


Missing attributes:

If attr could exist & if exist, must have some value


Or both:

If attr must exist & has to have some value…


PS: more combinations are possible…

Check this test in jsFiddle for examples:

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=""></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 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 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>


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


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

        return ($(this).attr('data-go-to').length > 0);

JS Fiddle demo.



Has ‘data-attributename’ and its value is not empty:


Has ‘data-attributename’ empty or not:


JS Fiddle example


According to the documentation
this should do it



Hope this helps





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



This works for me



Try this :



This works for me:

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

Leave a Reply

Your email address will not be published. Required fields are marked *