jquery data selector

Question

I need to select elements based on values stored in an element s  data   object  At a minimum  I d like to select top-level data properties using selectors  perhaps like this      a   data  category   music       a data category music       Or perhaps the selector would be in regular attribute selector format      a category music       Or in attribute format  but with a specifier to indicate it is in  data        a  category music       I ve found James Padolsey s implementation to look simple  yet good  The selector formats above mirror methods shown on that page  There is also this Sizzle patch   For some reason  I recall reading a while back that jQuery 1 4 would include support for selectors on values in the jquery  data   object  However  now that I m looking for it  I can t find it  Maybe it was just a feature request that I saw  Is there support for this and I m just not seeing it   Ideally  I d like to support sub-properties in data   using dot notation  Like this      a   data  user   name   first  Tom  last  Smith   username   tomsmith        a  user name first Tom       I also would like to support multiple data selectors  where only elements with ALL specified data selectors are found  The regular jquery multiple selector does an OR operation   For instance     a big  a small   selects a tags with either class big or small   I m looking for an AND  perhaps like this      a   data  artist   id  3281  name   Madonna        a   data  category   music       a  category music  amp  amp   artist name Madonna       Lastly  it would be great if comparison operators and regex features were available on data selectors  So   a  artist id gt 5000   would be possible  I realize I could probably do much of this using filter    but it would be nice to have a simple selector format   What solutions are available to do this  Is Jame s Padolsey s the best solution at this time  My concern is primarily in regards to performance  but also in the extra features like  sub-property dot-notation and multiple data selectors  Are there other implementations that support these things or are better in some way

User · Answer

You can also use a simple filtering function without any plugins  This is not exactly what you want but the result is the same      a   data  user    name   first  Tom  last  Smith   username   tomsmith         a   filter function         return   this  data  user    amp  amp    this  data  user   name first      Tom

User · Answer

You can set a data-  attribute on an elm using attr    and then select using that attribute   var elm      a   attr  data-test  123     assign 123 using attr   elm      a data-test 123       select elm using attribute   and now for that elm  both attr   and data   will yield 123   console log elm attr  data-test       123 console log elm data  test       123   However  if you modify the value to be 456 using attr    data   will still be 123    elm attr  data-test  456     modify to 456 elm      a data-test 456       reselect elm using new 456 attribute  console log elm attr  data-test       456 console log elm data  test       123   So as I understand it  seems like you probably should steer clear of intermingling attr   and data   commands in your code if you don t have to  Because attr   seems to correspond directly with the DOM whereas data   interacts with the  memory   though its initial value can be from the DOM  But the key point is that the two are not necessarily in sync at all   So just be careful   At any rate  if you aren t changing the data-  attribute in the DOM or in the memory  then you won t have a problem  Soon as you start modifying values is when potential problems can arise   Thanks to  Clarence Liu to  Ash s answer  as well as this post

User · Answer

At the moment I m selecting like this      a data-attribute true      Which seems to work just fine  but it would be nice if jQuery was able to select by that attribute without the  data-  prefix   I haven t tested this with data added to elements via jQuery dynamically  so that could be the downfall of this method

User · Answer

a data-category  music       It works  See Attribute Equals Selector  name    value

User · Answer

Here s a plugin that simplifies life https   github com rootical jQueryDataSelector  Use it like that    data selector           jQuery selector       name                    data-name          name   10               data-name 10          name   false            data-name false          name   null             data-name          name                Syntax error

User · Answer

If you also use jQueryUI  you get a  simple  version of the  data selector with it that checks for the presence of a data item  so you can do something like    div data view     or    this   closest   data view      See http   api jqueryui com data-selector    I don t know for how long they ve had it  but it s there now

User · Answer

There s a  data   filter plugin that does just this     Some examples based on your question      a data  category music        a data  user name first Tom         a data  category music   data  artist name Madonna        jQuery supports multiple of any selector to restrict further     just chain with no space in-between for this effect   The performance isn t going to be extremely great compared to what s possible  selecting from    cache and grabbing the corresponding elements is by far the fastest  but a lot more round-about and not very  jQuery-ey  in terms of how you get to stuff  you usually come in from the element side    Of th top of my head  I m not sure this is fastest anyway since the process of going from unique Id to element is convoluted in itself  in terms of performance   The comparison selector you mentioned will be best to do in a  filter    there s no built-in support for this in the plugin  though you could add it in without a lot of trouble

User · Answer

I ve created a new data selector that should enable you to do nested querying and AND conditions   Usage      a data category  music artist name  Madonna       The pattern is    data   namespace    operator   check         operator  and  check  are optional  So  if you only have  data a b c  it will simply check for the truthiness of a b c   You can see the available operators in the code below  Amongst them is    which allows regex testing      a data category   mus    artist name   M  a        I ve tested it with a few variations and it seems to work quite well  I ll probably add this as a Github repo soon  with a full test suite   so keep a look out   The code    function         var matcher     s                              s      gt  lt       gt  lt    s              3       3        s         g       function resolve element  data             data   data match                         g            var cur   jQuery data element  data shift              while  cur  amp  amp  data 0                 cur   cur data shift                        return cur    undefined              jQuery expr      data   function el  i  match             matcher lastIndex   0           var expr   match 3               m              check  val              allMatch   null              foundMatch   false           while  m   matcher exec expr                  check   m 4               val   resolve el  m 1     m 5                 switch  m 2                     case       foundMatch   val    check  break                  case       foundMatch   val    check  break                  case   lt     foundMatch   val  lt   check  break                  case   gt     foundMatch   val  gt   check  break                  case       foundMatch   RegExp check  test val   break                  case   gt    foundMatch   val  gt  check  break                  case   lt    foundMatch   val  lt  check  break                  default  if  m 5   foundMatch     val                             allMatch   allMatch     null   foundMatch   allMatch  amp  amp  foundMatch                      return allMatch

User · Answer

I want to warn you that    a data-attribute true    doesn t work  as per Ashley s reply  if you attached data to a DOM element via the data   function    It works as you d expect if you added an actual data-attr in your HTML  but jQuery stores the data in memory  so the results you d get from    a data-attribute true    would not be correct   You ll need to use the data plugin http   code google com p jquerypluginsblog   use Dmitri s filter solution  or do a   each over all the elements and check  data   iteratively

[jquery] jquery data selector

Examples related to jquery

Examples related to jquery-selectors