How to get the data-id attribute

Question

I m using the jQuery quicksand plugin  I need to get the data-id of the clicked item and pass it to a webservice  How do I get the data-id attribute  I m using the  on   method to re-bind the click event for sorted items    x000D   x000D      list li   on  click   function     x000D        ret   DetailsView GetProject   this  attr   data-id    OnComplete  OnTimeOut  OnError   x000D    alert   this  attr   data-id     x000D      x000D   lt script src  https   code jquery com jquery-3 3 1 slim min js  gt  lt  script gt  x000D   x000D   lt ul id  list  class  grid  gt  x000D     lt li data-id  id-40  class  win  gt  x000D       lt a id  ctl00 cphBody ListView1 ctrl0 SelectButton  class  project  href     gt  x000D         lt img src  themes clean images win jpg  class  project-image  alt  get data-id    gt  x000D       lt  a gt  x000D     lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Accepted Answer

To get the contents of the attribute data-id  like in  lt a data-id  123  gt link lt  a gt   you have to use    this  attr  data-id      will return the string  123    or  data    if you use newer jQuery    1 4 3     this  data  id      will return the number 123   and the part after data- must be lowercase  e g  data-idNum will not work  but data-idnum will

User · Answer

The issue is you are not specifying the option or selected option of dropdown or list  Here is an example for dropdown  i am assuming a data attribute data-record      select   on  change   function            let element      quot  visiabletoID quot            element val   this  find   selected   data  record

User · Answer

Try  this dataset id    x000D   x000D      list li   on  click   function     x000D    alert  this dataset id    x000D      x000D   lt script src  https   code jquery com jquery-3 3 1 slim min js  gt  lt  script gt  x000D   x000D   lt ul id  list  class  grid  gt  x000D     lt li data-id  id-40  class  win  gt  x000D       lt a id  ctl00 cphBody ListView1 ctrl0 SelectButton  class  project  href     gt  x000D         lt img src  themes clean images win jpg  class  project-image  alt  get data-id  gt  gt CLICK ME lt  lt     gt  x000D       lt  a gt  x000D     lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

This piece of code will return the value of the data attributes eg  data-id  data-time  data-name etc    I have shown for the id   lt a href     id  click-demo  data-id  a1  gt Click lt  a gt    js     this  data  id         get the value of the data-id -  a1    this  data  id    a2         this will change the data-id -  a2    this  data  id         get the value of the data-id -  a2

User · Answer

I have a span  I want to take the value of attribute data-txt-lang  which is used defined     document  ready function       lt span class  txt-lang-btn  data-txt-lang  en  gt EN lt  span gt  alert     txt-lang-btn   attr  data-txt-lang

User · Answer

Important note  Keep in mind  that if you adjust the data- attribute dynamically via JavaScript it will NOT be reflected in the data   jQuery function  You have to adjust it via data   function as well    lt a data-id  123  gt link lt  a gt    js     this  data  id      returns 123   this  attr  data-id    321      change the attribute   this  data  id      STILL returns 123      this  data  id    321     this  data  id      NOW we have 321

User · Answer

HTML   lt span id  spanTest  data-value  50  gt test lt  span gt    JS    this  data   value    or     span spanTest   data   value       ANS   50   Works for me

User · Answer

I use   data - http   api jquery com jquery data     Set value 7 to data-id    data this   id   7      Get value from data-id alert    this  data  id           gt  outputs 7

User · Answer

If we want to retrieve or update these attributes using existing  native JavaScript  then we can do so using the getAttribute and setAttribute methods as shown below      Through JavaScript    lt div id  strawberry-plant  data-fruit  12  gt  lt  div gt    lt script gt      Getting  data-attributes using getAttribute var plant   document getElementById  strawberry-plant    var fruitCount   plant getAttribute  data-fruit       fruitCount    12       Setting  data-attributes using setAttribute plant setAttribute  data-fruit   7       Pesky birds  lt  script gt    Through jQuery     Fetching data var fruitCount     this  data  fruit    OR     If you updated the value  you will need to use below code to fetch new value     otherwise above gives the old value which is intially set     And also above does not work in    Firefox     so use below code to fetch value var fruitCount     this  attr  data-fruit        Assigning data   this  attr  data-fruit   7      Read this documentation

User · Answer

Surprised no one mentioned     lt select id  selectVehicle  gt        lt option value  1  data-year  2011  gt Mazda lt  option gt        lt option value  2  data-year  2015  gt Honda lt  option gt        lt option value  3  data-year  2008  gt Mercedes lt  option gt        lt option value  4  data-year  2005  gt Toyota lt  option gt       lt  select gt       selectVehicle   change function           alert   this  find   selected   data  year           Here is the working example  https   jsfiddle net ed5axgvk 1

User · Answer

For those looking to dynamically remove and re-enable the tooltip  you can use the dispose and enable methods  See https   getbootstrap com docs 4 0 components tooltips  tooltipdispose

User · Answer

If you are not concerned about old IE browsers  you can also use HTML5 dataset API  HTML   lt div id  my-div  data-info  some info here  data-other-info  more info here  gt My Awesome Div lt  div gt    JS  var myDiv   document querySelector   my-div     myDiv dataset info     some info here  myDiv dataset otherInfo     more info here    Demo  http   html5demos com dataset  Full browser support list  http   caniuse com  feat dataset

User · Answer

using jQuery          myClass    load function         var myId     this  data  id            myClass   attr  id   myId

User · Answer

var id     this  dataset id   works for me

User · Answer

Accessing data attribute with its own id is bit easy for me       Id   data  attribute      x000D   x000D  function myFunction    x000D    alert     button1   data  sample-id     x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt button type  button  id  button1  data-sample-id  gotcha   onclick  myFunction    gt  Clickhere  lt  button gt  x000D   x000D   x000D

[javascript] How to get the data-id attribute?

Examples related to javascript

Examples related to html

Examples related to jquery

Examples related to custom-data-attribute