1185

Is there an easy and straight-forward method to select elements based on their data attribute? For example, select all anchors that has data attribute named customerID which has value of 22.

I am kind of hesitant to use rel or other attributes to store such information, but I find it much harder to select an element based on what data is stored in it.

3
  • 2
    See also stackoverflow.com/q/4191386/292060
    – goodeye
    Jan 7, 2015 at 4:47
  • 1
    That's what helped me to select all data attributes (regardless the value): $('*[data-customerID]') You can use it with e.g. $('*[data-customerID]').each( function() { ... });
    – Avatar
    Jan 14, 2020 at 8:15
  • @Avatar or you could just use $('[data-customerID]')
    – Jacques
    Feb 10 at 22:24

12 Answers 12

1670
$('*[data-customerID="22"]');

You should be able to omit the *, but if I recall correctly, depending on which jQuery version you’re using, this might give faulty results.

Note that for compatibility with the Selectors API (document.querySelector{,all}), the quotes around the attribute value (22) may not be omitted in this case.

Also, if you work with data attributes a lot in your jQuery scripts, you might want to consider using the HTML5 custom data attributes plugin. This allows you to write even more readable code by using .dataAttr('foo'), and results in a smaller file size after minification (compared to using .attr('data-foo')).

3
  • 74
    Just a note that .data('foo') works to get the value of a 'data-foo' attribute since jQuery 1.4.3. Also, since jQuery 1.6: .data('fooBar') gets attribute 'data-foo-bar'. Jul 1, 2011 at 14:49
  • 62
    Also if you are interested only in presence of specific data attribute, you could do this: $('[data-customerID]')
    – Darkside
    Dec 1, 2013 at 16:12
  • 13
    This doesn't work, if the data field was set by jquery (using .data()), right?
    – Martin R.
    May 14, 2017 at 11:31
427

For people Googling and want more general rules about selecting with data-attributes:

$("[data-test]") will select any element that merely has the data attribute (no matter the value of the attribute). Including:

<div data-test=value>attributes with values</div>
<div data-test>attributes without values</div>

$('[data-test~="foo"]') will select any element where the data attribute contains foo but doesn't have to be exact, such as:

<div data-test="foo">Exact Matches</div>
<div data-test="this has the word foo">Where the Attribute merely contains "foo"</div>

$('[data-test="the_exact_value"]') will select any element where the data attribute exact value is the_exact_value, for example:

<div data-test="the_exact_value">Exact Matches</div>

but not

<div data-test="the_exact_value foo">This won't match</div>
1
  • 29
    Good. Note that ~= matches whitespace-separated words whereas *= matches any substring.
    – sam
    Apr 16, 2016 at 2:50
152

Using $('[data-whatever="myvalue"]') will select anything with html attributes, but in newer jQueries it seems that if you use $(...).data(...) to attach data, it uses some magic browser thingy and does not affect the html, therefore is not discovered by .find as indicated in the previous answer.

Verify (tested with 1.7.2+) (also see fiddle): (updated to be more complete)

var $container = $('<div><div id="item1"/><div id="item2"/></div>');

// add html attribute
var $item1 = $('#item1').attr('data-generated', true);

// add as data
var $item2 = $('#item2').data('generated', true);

// create item, add data attribute via jquery
var $item3 = $('<div />', {id: 'item3', data: { generated: 'true' }, text: 'Item 3' });
$container.append($item3);

// create item, "manually" add data attribute
var $item4 = $('<div id="item4" data-generated="true">Item 4</div>');
$container.append($item4);

// only returns $item1 and $item4
var $result = $container.find('[data-generated="true"]');
12
115

I haven't seen a JavaScript answer without jQuery. Hopefully it helps someone.

var elements = document.querySelectorAll('[data-customerID="22"]');

elements[0].innerHTML = 'it worked!';
<a data-customerID='22'>test</a>

Info:

0
73

To select all anchors with the data attribute data-customerID==22, you should include the a to limit the scope of the search to only that element type. Doing data attribute searches in a large loop or at high frequency when there are many elements on the page can cause performance issues.

$('a[data-customerID="22"]');
50

Native JS Examples

Get NodeList of elements

var elem = document.querySelectorAll('[data-id="container"]')

html: <div data-id="container"></div>

Get the first element

var firstElem = document.querySelector('[id="container"]')

html: <div id="container"></div>

Target a collection of nodes which returns a nodelist

document.getElementById('footer').querySelectorAll('[data-id]')

html:

<div class="footer">
    <div data-id="12"></div>
    <div data-id="22"></div>
</div>

Get elements based on multiple (OR) data values

document.querySelectorAll('[data-section="12"],[data-selection="20"]')

html:

<div data-selection="20"></div>
<div data-section="12"></div>

Get elements based on combined (AND) data values

document.querySelectorAll('[data-prop1="12"][data-prop2="20"]')

html:

<div data-prop1="12" data-prop2="20"></div>

Get items where the value starts with

document.querySelectorAll('[href^="https://"]')
1
  • The selector for "get the first element" is correct but not consistent with the other examples -- I believe it's missing "data-".
    – GuyPaddock
    Mar 20, 2020 at 23:13
17

via Jquery filter() method:

http://jsfiddle.net/9n4e1agn/1/

HTML:

<button   data-id='1'>One</button>
<button   data-id='2'>Two</button>

JavaScript:

$(function() {    
    $('button').filter(function(){
        return $(this).data("id")   == 2}).css({background:'red'});  
     });
2
  • Did you try the fiddle? FIlter method is just another approach to achieve the same thing. It can be useful when you already have a set of Jquery objects and you need to filter based on data attribute or anything else.
    – Razan Paul
    Jul 20, 2015 at 22:53
  • My apologies, @Blizzard. I've commented on the wrong answer. Pasted it to the right one now. #AlwaysALongDayAtWork
    – Peter B
    Jul 21, 2015 at 14:45
17

The construction like this: $('[data-XXX=111]') isn't working in Safari 8.0.

If you set data attribute this way: $('div').data('XXX', 111), it only works if you set data attribute directly in DOM like this: $('div').attr('data-XXX', 111).

I think it's because jQuery team optimized garbage collector to prevent memory leaks and heavy operations on DOM rebuilding on each change data attribute.

1
  • This helped me a lot - if I used the data or prop methods, then selection by $('...[data-x="y"]') was not working - I used attr instead (it pushes the attribute change to the DOM). Thx
    – Jarda
    Jul 27, 2017 at 10:25
14

For this to work in Chrome the value must not have another pair of quotes.

It only works, for example, like this:

$('a[data-customerID=22]');
2
  • 4
    This appears to be incorrect. At least it isn't correct now. I've just used $('[data-action="setStatus"]').removeClass('disabled'); in Chrome and it works perfectly.
    – Peter B
    Jul 21, 2015 at 14:45
  • I guess there is no use of "" inside the selector, it can be used as $('[data-action=setStatus]').removeClass('disabled') May 27, 2017 at 4:53
9

It's sometimes desirable to filter elements based on whether they have data-items attached to them programmatically (aka not via dom-attributes):

$el.filter(function(i, x) { return $(x).data('foo-bar'); }).doSomething();

The above works but is not very readable. A better approach is to use a pseudo-selector for testing this sort of thing:

$.expr[":"].hasData = $.expr.createPseudo(function (arg) {
    return function (domEl) {
        var $el = $(domEl);
        return $el.is("[" + ((arg.startsWith("data-") ? "" : "data-") + arg) + "]") || typeof ($el.data(arg)) !== "undefined";
    };
});

Now we can refactor the original statement to something more fluent and readable:

$el.filter(":hasData('foo-bar')").doSomething();
1
  • 1
    The first solution misses the return statement, it needs to be: $el.filter(function(i, x) { return $(x).data('foo-bar'); }).doSomething(); Aug 10, 2017 at 8:05
5

Just to complete all the answers with some features of the 'living standard' - By now (in the html5-era) it is possible to do it without an 3rd party libs:

  • pure/plain JS with querySelector (uses CSS-selectors):
    • select the first in DOM: document.querySelector('[data-answer="42"],[type="submit"]')
    • select all in DOM: document.querySelectorAll('[data-answer="42"],[type="submit"]')
  • pure/plain CSS
    • some specific tags: [data-answer="42"],[type="submit"]
    • all tags with an specific attribute: [data-answer] or input[type]
0

It will work :)

$('.ic-star[data-rate="1"]').addClass('rated');

1
  • 2
    Please don't post code-only answers but add a little textual explanation about how and why your approach works and what makes it different from the other answers given. You can find out more at our "How to write a good answer" page.
    – ahuemmer
    Dec 10, 2022 at 8:20

Not the answer you're looking for? Browse other questions tagged or ask your own question.