jQuery selectors on custom data attributes using HTML5

Question

I would like to know what selectors are available for these data attributes that come with HTML5   Taking this piece of HTML as an example    lt ul data-group  Companies  gt     lt li data-company  Microsoft  gt  lt  li gt     lt li data-company  Google  gt  lt  li gt     lt li data-company   Facebook  gt  lt  li gt   lt  ul gt    Are there selectors to get    All elements with data-company  Microsoft  below  Companies  All elements with data-company   Microsoft  below  Companies  In other cases is it possible to use other selectors like  contains  less than  greater than  etc

User · Answer

Pure vanilla JS solution  working example here      All elements with data-company  Microsoft  below  Companies  let a   document querySelectorAll   data-group  Companies    data-company  Microsoft           All elements with data-company   Microsoft  below  Companies  let b   document querySelectorAll   data-group  Companies    not  data-company  Microsoft          In querySelectorAll you must use valid CSS selector  currently Level3    SPEED TEST  2018 06 29  for jQuery and Pure JS  test was performed on MacOs High Sierra 10 13 3 on Chrome 67 0 3396 99  64-bit   Safari 11 0 3  13604 5 6   Firefox 59 0 2  64-bit   Below screenshot shows results for fastest browser  Safari      PureJS was faster than jQuery about 12  on Chrome  21  on Firefox and 25  on Safari  Interestingly speed for Chrome was 18 9M operation per second  Firefox 26M  Safari 160 9M        So winner is PureJS and fastest browser is Safari  more than 8x faster than Chrome    Here you can perform test on your machine  https   jsperf com js-selectors-x

User · Answer

jsFiddle Demo  jQuery provides several selectors  full list  in order to make the queries you are looking for work  To address your question  In other cases is it possible to use other selectors like  contains  less than  greater than  etc       you can also use contains  starts with  and ends with to look at these html5 data attributes  See the full list above in order to see all of your options   The basic querying has been covered above  and using John Hartsock s answer is going to be the best bet to either get every data-company element  or to get every one except Microsoft  or any other version of  not    In order to expand this to the other points you are looking for  we can use several meta selectors  First  if you are going to do multiple queries  it is nice to cache the parent selection   var group      ul data-group  Companies        Next  we can look for companies in this set who start with G  var google       data-company   G    group    google   Or perhaps companies which contain the word soft  var microsoft       data-company   soft    group    microsoft   It is also possible to get elements whose data attribute s ending matches  var facebook       data-company   book    group    facebook    x000D   x000D    stored selector x000D  var group      ul data-group  Companies      x000D   x000D    data-company starts with G x000D  var google       data-company   G    group  css  color   green    x000D   x000D    data-company contains soft x000D  var microsoft       data-company   soft    group  css  color   blue    x000D   x000D    data-company ends with book x000D  var facebook       data-company   book    group  css  color   pink    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt ul data-group  Companies  gt  x000D     lt li data-company  Microsoft  gt Microsoft lt  li gt  x000D     lt li data-company  Google  gt Google lt  li gt  x000D     lt li data-company   Facebook  gt Facebook lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

ul data-group  Companies   li data-company  Microsoft       Get all elements with data-company  Microsoft  below  Companies      ul data-group  Companies   li not  data-company  Microsoft        get all elements with data-company   Microsoft  below  Companies    Look in to jQuery Selectors  contains is a selector  here is info on the  contains selector

User · Answer

jQuery UI has a  data   selector which can also be used  It has been around since Version 1 7 0 it seems   You can use it like this   Get all elements with a data-company attribute  var companyElements      ul data group  li data company       Get all elements where data-company equals Microsoft  var microsoft      ul data group  li data company                         filter function                              return   this  data  company       Microsoft                             Get all elements where data-company does not equal Microsoft  var notMicrosoft      ul data group  li data company                            filter function                                 return   this  data  company       Microsoft                                etc     One caveat of the new  data   selector is that you must set the data value by code for it to be selected  This means that for the above to work  defining the data in HTML is not enough  You must first do this      li   first   data  company    Microsoft      This is fine for single page applications where you are likely to use        data  datakey    value   in this or similar ways

[javascript] jQuery selectors on custom data attributes using HTML5

Examples related to javascript

Examples related to jquery

Examples related to jquery-selectors

Examples related to custom-data-attribute