Selecting element by data attribute with jQuery

Question

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

User · Answer

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>

User · Answer

I haven t seen a JavaScript answer without jQuery  Hopefully it helps someone    x000D   x000D  var elements   document querySelectorAll   data-customerID  22      x000D   x000D  elements 0  innerHTML    it worked    x000D   lt a data-customerID  22  gt test lt  a gt  x000D   x000D   x000D    Info    data attributes  querySelectorAll

User · Answer

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

User · Answer

via Jquery filter   method   http   jsfiddle net 9n4e1agn 1   HTML    lt button   data-id  1  gt One lt  button gt   lt button   data-id  2  gt Two lt  button gt    JavaScript     function                button   filter function            return   this  data  id        2   css  background  red

User · Answer

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

User · Answer

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       lt div gt  lt div id  item1   gt  lt div id  item2   gt  lt  div gt         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       lt div   gt     id   item3   data    generated   true     text   Item 3       container append  item3       create item   manually  add data attribute var  item4       lt div id  item4  data-generated  true  gt Item 4 lt  div gt      container append  item4       only returns  item1 and  item4 var  result    container find   data-generated  true

User · Answer

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

User · Answer

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

User · Answer

Native JS Examples  Get NodeList of elements  var elem   document querySelectorAll   data-id  container       html   lt div data-id  container  gt  lt  div gt   Get the first element      var firstElem   document querySelector   id  container       html   lt div id  container  gt  lt  div gt   Target a collection of nodes which returns a nodelist  document getElementById  footer   querySelectorAll   data-id      html    lt div class  footer  gt       lt div data-id  12  gt  lt  div gt       lt div data-id  22  gt  lt  div gt   lt  div gt    Get elements based on multiple  OR  data values  document querySelectorAll   data-section  12    data-selection  20       html    lt div data-selection  20  gt  lt  div gt   lt div data-section  12  gt  lt  div gt    Get elements based on combined  AND  data values  document querySelectorAll   data-prop1  12   data-prop2  20       html    lt div data-prop1  12  data-prop2  20  gt  lt  div gt    Get items where the value starts with  document querySelectorAll   href   https

User · Answer

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

User · Answer

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

[jquery] Selecting element by data attribute with jQuery

Examples related to jquery

Examples related to html

Examples related to custom-data-attribute