jQuery how to find an element based on a data-attribute value

Question

I ve got the following scenario   var el    li     and there are 5  lt li gt  s on the page each with a data-slide number attribute  number being 1 2 3 4 5 respectively    I now need to find the currently active slide number which is mapped to var current      ul   data current   and is updated on each slide change   So far my tries have been unsuccessful  trying to construct the selector that would match the current slide      ul   find el  data-slide  current       does not match return anything     The reason I can t hardcode the li part is that this is a user accessible variable that can be changed to a different element if required  so it may not always be an li   Any ideas on what I m missing

User · Answer

I have faced the same issue while fetching elements using jQuery and data-* attribute.

so for your reference the shortest code is here:

This is my HTML Code:

<section data-js="carousel"></section>
<section></section>
<section></section>
<section data-js="carousel"></section>

This is my jQuery selector:

$('section[data-js="carousel"]');
// this will return array of the section elements which has data-js="carousel" attribute.

User · Answer

Without JQuery  ES6  document querySelectorAll   data-slide    current         I know the question is about JQuery  but readers may want a pure JS method

User · Answer

You have to inject the value of current into an Attribute Equals selector     quot ul quot   find   data-slide    current       For older JavaScript environments  ES5 and earlier      quot ul quot   find  quot  data-slide   quot    current    quot    quot

User · Answer

When searching with  data-x       watch out  it doesn t work with jQuery data     setter       lt b data-x  1  gt      is   data-x 1       this works  gt  true      lt b gt    data  x   1  is   data-x 1       this doesn t  gt  false      lt b gt    attr  data-x   1  is   data-x 1       this is the workaround  gt  true   You can use this instead     fn filterByData   function prop  val        return this filter          function     return   this  data prop   val                  lt b gt    data  x   1  filterByData  x   1  length  gt  1

User · Answer

ul   find  li data-slide      current            I hope this may work better  thanks

User · Answer

in case you don t want to type all that  here s a shorter way to query by data attribute      ul data-slide      current           FYI  http   james padolsey com javascript a-better-data-selector-for-jquery

User · Answer

I improved upon psycho brm s filterByData extension to jQuery   Where the former extension searched on a key-value pair  with this extension you can additionally search for the presence of a data attribute  irrespective of its value    function              fn filterByData   function  prop  val            var  self   this          if  typeof val      undefined                 return  self filter                  function      return typeof   this  data prop       undefined                                      return  self filter              function      return   this  data prop     val                          window jQuery     Usage       lt b gt    data  x   1  filterByData  x   1  length       output  1     lt b gt    data  x   1  filterByData  x   length          output  1    x000D   x000D     test data x000D  function extractData     x000D    log  data-prop val               div   filterByData  prop    val   length   x000D    log  data-prop                   div   filterByData  prop   length   x000D    log  data-random                 div   filterByData  random   length   x000D    log  data-test                   div   filterByData  test   length   x000D    log  data-test anyval            div   filterByData  test    anyval   length   x000D    x000D   x000D    document  ready function     x000D        b5   data  test    anyval    x000D      x000D   x000D     the actual extension x000D   function      x000D   x000D      fn filterByData   function prop  val    x000D      var  self   this  x000D      if  typeof val      undefined     x000D        return  self filter  x000D   x000D          function     x000D            return typeof   this  data prop       undefined   x000D              x000D        x000D      return  self filter  x000D   x000D        function     x000D          return   this  data prop     val  x000D            x000D       x000D   x000D     window jQuery   x000D   x000D   x000D    just to quickly log x000D  function log txt    x000D    if  window console  amp  amp  console log    x000D      console log txt   x000D          else   x000D          alert  You need a console to check the results    x000D      x000D        result   append txt     lt br   gt     x000D    x000D   bPratik   x000D    font-family  monospace  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div id  bPratik  gt  x000D     lt h2 gt Setup lt  h2 gt  x000D     lt div id  b1  data-prop  val  gt Data added inline    data-prop  val  lt  div gt  x000D     lt div id  b2  data-prop  val  gt Data added inline    data-prop  val  lt  div gt  x000D     lt div id  b3  data-prop  diffval  gt Data added inline    data-prop  diffval  lt  div gt  x000D     lt div id  b4  data-test  val  gt Data added inline    data-test  val  lt  div gt  x000D     lt div id  b5  gt Data will be added via jQuery lt  div gt  x000D     lt h2 gt Output lt  h2 gt  x000D     lt div id  result  gt  lt  div gt  x000D   x000D     lt hr   gt  x000D     lt button onclick  extractData    gt Reveal lt  button gt  x000D   lt  div gt  x000D   x000D   x000D    Or the fiddle  http   jsfiddle net PTqmE 46

User · Answer

This selector    ul  data-slide      current         will work for following structure    lt ul gt  lt li data-slide  item  gt  lt  li gt  lt  ul gt      While this    ul data-slide      current         will work for    lt ul data-slide  item  gt  lt li gt  lt  li gt  lt  ul gt

User · Answer

Going back to his original question  about how to make this work without knowing the element type in advance  the following does this     ContainerNode  find el nodeName     data-slide      current

[jquery] jQuery how to find an element based on a data-attribute value?

Examples related to jquery

Examples related to jquery-selectors

Examples related to custom-data-attribute