How can I get the ID of an element using jQuery

Question

lt div id  test  gt  lt  div gt   lt script gt      document  ready function         alert     test   id            lt  script gt    Why doesn t the above work  and how should I do this

User · Answer

id is not a valid jquery function  You need to use the  attr   function to access attributes an element possesses  You can use  attr   to both change an attribute value by specifying two parameters  or get the value by specifying one   http   api jquery com attr

User · Answer

Well  seems there has not been a solution and would like to propose my own solution that is an expansion of the JQuery prototype s   I put this in a Helper file that is loaded after the JQuery library  hence the check for window jQuery  if  window jQuery          prototype id   function              if  this length  gt  1                var val                   this each function  idx  el                    val push   el  id                                 return val            else               return this attr  id                        It may not be perfect but it is a start to maybe getting inclusion into the JQuery library   Returns either a single string value or an Array of string values   The Array of string values  is for the event an multi-element selector was used

User · Answer

The jQuery way       test   attr  id     In your example    x000D   x000D    document  ready function     x000D    console log     test   attr  id     x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt div id  test  gt  lt  div gt  x000D   x000D   x000D    Or through the DOM       test   get 0  id    or even        test   0  id    and reason behind usage of     test   get 0  in JQuery or even     test   0  is that     test   is a JQuery selector and returns an array   of results not a single element by its default functionality  an alternative for DOM selector in jquery is       test   prop  id     which is different from  attr   and     test   prop  foo   grabs the specified DOM foo property  while     test   attr  foo   grabs the specified HTML foo attribute and you can find more details about differences here

User · Answer

test   returns a jQuery object  so you can t use simply object id to get its Id  you need to use     test   attr  id    which returns your required ID of the element   This can also be done as follows        test   get 0  id which is equal to document getElementById  test   id

User · Answer

This can be element id   class   or automatically using even  ------------------------   this  attr  id                              ------------------------    a remove data-id  2     attr  id                              ------------------------     abc1    attr  id

User · Answer

Maybe useful for others that find this thread  The code below will only work if you already use jQuery  The function returns always an identifier  If the element doesn t have an identifier the function generates the identifier and append this to the element   var generatedIdCounter   0     fn id   function         var identifier   this attr  id         if  identifier            generatedIdCounter            identifier    isGenerated     generatedIdCounter           this attr  id   identifier              return identifier      How to use       classname   id         elementId   id

User · Answer

Important  if you are creating a new object with jQuery and binding an event  you MUST use prop and not attr  like this       lt div  gt     id   yourId   class   yourClass   html    lt span gt  lt  span gt      on  click   function e    alert   this  prop  id        appendTo   something

User · Answer

lt html gt   lt head gt     lt link rel  stylesheet href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  gt     lt script src  https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt     lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt       lt  head gt   lt  php        include Database connection file      include  db connection php            Design initial table header       data     lt table class  table table-bordered table-striped  gt                           lt tr gt                               lt th gt No  lt  th gt                               lt th gt First Name lt  th gt                               lt th gt Last Name lt  th gt                               lt th gt Email Address lt  th gt                               lt th gt Update lt  th gt                               lt th gt Delete lt  th gt                           lt  tr gt         query    SELECT   FROM users       if    result   mysqli query  con   query             exit mysqli error  con                 if query results contains rows then featch those rows      if mysqli num rows  result   gt  0                 number   1          while  row   mysqli fetch assoc  result                          data      lt tr gt                   lt td gt    number   lt  td gt                   lt td gt    row  first name     lt  td gt                   lt td gt    row  last name     lt  td gt                   lt td gt    row  email     lt  td gt                       lt td gt  lt button onclick  DeleteUser    row  id       class  btn btn-danger  gt Delete lt  button gt                   lt  td gt               lt  tr gt                 number                         else                  records now found           data      lt tr gt  lt td colspan  6  gt Records not found  lt  td gt  lt  tr gt                data      lt  table gt        echo  data    gt    lt script type  text javascript  gt       function DeleteUser id        var conf   confirm  Are you sure  do you really want to delete User         if  conf    true              ajax                       url  deleteUser php                       method  POST                       data                           id id                                    success function data                         alert  delete successfully                                    deleteUser php   lt  php    check request if isset   POST  id     amp  amp  isset   POST  id                    include Database connection file     include  db connection php            get user id      user id     POST  id            delete User      query    DELETE FROM users WHERE id     user id        if    result   mysqli query  con   query             exit mysqli error  con              gt

User · Answer

selector   attr  id   will return the id of the first matched element  Reference    If your matched set contains more than one element  you can use the conventional  each iterator to return an array containing each of the ids   var retval         selector   each function      retval push   this  attr  id       return retval   Or  if you re willing to get a little grittier  you can avoid the wrapper and use the  map shortcut   return     selector   map function index dom  return dom id

User · Answer

it does not answer the OP  but may be interesting to others  you can access the  id field in this case       drop-insert   map  i  o    gt  o id

User · Answer

id is a property of an html Element  However  when you write     something    it returns a jQuery object that wraps the matching DOM element s   To get the first matching DOM element back  call get 0       test   get 0    On this native element  you can call id  or any other native DOM property or function       test   get 0  id   That s the reason why id isn t working in your code    Alternatively  use jQuery s attr method as other answers suggest to get the id attribute of the first matching element       test   attr  id

User · Answer

test   attr  id   In your example    lt div id  test  gt  lt  div gt     document  ready function         alert     test   attr  id

User · Answer

fn extend       id   function             return this attr  id               alert      element   id        Some checking code required of course  but easily implemented

User · Answer

This is an old question  but as of 2015 this may actually work       test   id    And you can also make assignments       test   id    abc     As long as you define the following JQuery plugin   Object defineProperty   fn   id         get  function      return this attr  id           set  function  newValue    this attr  id   newValue           Interestingly  if element is a DOM element  then   element id       element  id     Is true

User · Answer

If you want to get an ID of an element  let s say by a class selector  when an event  in this case click event  was fired on that specific element  then the following will do the job        your-selector   click function           var id     this  attr  id

User · Answer

Since the id is an attribute  you can get it by using the attr method

User · Answer

Above answers are great  but as jquery evolves   so you can also do   var myId       test   prop  id

User · Answer

This will finally solve your problems   lets say you have many buttons on a page and you want to change one of them with jQuery Ajax  or not ajax  depending on their ID   lets also say that you have many different type of buttons  for forms  for approval and for like purposes   and you want the jQuery to treat only the  like  buttons   here is a code that is working  the jQuery will treat only the buttons that are of class  cls-hlpb  it will take the id of the button that was clicked  and will change it according to the data that comes from the ajax    lt  DOCTYPE html gt   lt html gt   lt head gt   lt script src  https   ajax googleapis com ajax libs jquery 1 11 3 jquery min js  gt      lt  script gt   lt script gt    document  ready function        clshlpbtn   on  click  function e   var id     e target  attr  id     alert  The id of the button that was clicked    id     post  demo test post asp               name   Donald Duck         city   Duckburg             function data status          parsing the data should come here        var obj   jQuery parseJSON data               id  val obj name         etc       if  id   btnhlp-1                id  attr  style   color red              id  val data                        lt  script gt   lt  head gt   lt body gt    lt input type  button  class  clshlpbtn  id  btnhlp-1  value  first btn  gt      lt  input gt   lt br   gt   lt input type  button  class  clshlpbtn  id  btnhlp-2  value  second btn  gt      lt  input gt   lt br   gt   lt input type  button  class  clshlpbtn  id  btnhlp-9  value  ninth btn  gt      lt  input gt    lt  body gt   lt  html gt    code was taken from w3schools and changed

User · Answer

tagname   attr  id      Using above code you can get id

[jquery] How can I get the ID of an element using jQuery?

Examples related to jquery

Examples related to jquery-selectors