jQuery: Select data attributes that aren't empty?

javascript jquery jquery-selectors custom-data-attribute

Just as further reference, and an up-to-date ^{(may'14) (aug'15) (sep'16) (apr'17) (mar'18) (mar'19) (may'20)}...
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.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
jQuery v3.4.1 -> jsFiddle online test ^{Last jQuery version available in jsFiddle at may 28'20}
jQuery Edge -> jsFiddle online test ^{jQuery edge version (use with caution)}

Or here in SO with this Code Snippet.

^{* Snippet is running jQuery v2.1.1}

Show code snippet

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>

Expand snippet