jQuery: Select data attributes that aren’t empty?

by

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:

###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>

More Related Contents:

  1. jQuery selectors on custom data attributes using HTML5
  2. How can I know which radio button is selected via jQuery?
  3. Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
  4. Should all jquery events be bound to $(document)?
  5. jQuery selector regular expressions
  6. Is there a case insensitive jQuery :contains selector?
  7. Assign click handlers in for loop
  8. How can I select an element by name with jQuery?
  9. jQuery selector for inputs with square brackets in the name attribute
  10. jQuery get specific option tag text
  11. jQuery to loop through elements with the same class
  12. Select all elements that have a specific CSS, using jQuery
  13. How to get all options of a select using jQuery?
  14. jQuery function to get all unique elements from an array?
  15. JQuery .on() method with multiple event handlers to one selector
  16. Get index of clicked element in collection with jQuery
  17. Case insensitive jQuery attribute selector
  18. jQuery Selector + SVG Incompatible?
  19. jQuery: get data attribute
  20. Using jQuery to search a string of HTML
  21. Store jquery selector in variable
  22. jQuery: Check if div with certain class name exists
  23. Is there a ‘has focus’ in JavaScript (or jQuery)?
  24. jQuery :contains(), but to match an exact string
  25. Getting a jQuery selector for an element
  26. In jQuery, is selecting by class or id faster than selecting by some other attribute?
  27. Getting the “match” object in a Custom Filter Selector in jQuery 1.8
  28. How to select empty inputs (value=””) using jQuery
  29. jQuery selector to target any class name (of multiple present) starting with a prefix?
  30. Why do functional pseudos such as :not() and :has() allow quoted arguments?

Leave a Comment