Finding the id of a parent div using Jquery

Question

I have some html like this    lt div id  1  gt       lt p gt          Volume    lt input type  text    gt           lt button rel  3 93e-6  class  1  type  button  gt Check answer lt  button gt       lt  p gt       lt div gt  lt  div gt   lt  div gt    and some JS like this      button   click function          var buttonNo     this  attr  class        var correct   Number   this  attr  rel          validate  Number       buttonNo   input   val    correct             buttonNo   div   html feedback         What I d really like is if I didn t have to have the class  1  on the button  I know numeric classes aren t valid  but this is a WIP    so I could determine buttonNo based on the id of the parent div  In real life there are multiple sections looking like this    How do I find the id of the div parenting the button  What would be a more semantic way to store the answer in the button code  I want to make this as foolproof as possible for a non programmer to copy and paste without breaking things

User · Accepted Answer

You could use event delegation on the parent div. Or use the closest method to find the parent of the button.

The easiest of the two is probably the closest.

var id = $("button").closest("div").prop("id");

User · Answer

find   and closest   seems slightly slower than     this  parent   attr  id

User · Answer

To get the id of the parent div    buttonSelector  parents  div eq 0    attr  id     Also  you can refactor your code quite a bit     button   click  function      var correct   Number   this  attr  rel      validate Number   this  siblings  input   val     correct      this  parents  div eq 0    html feedback        Now there is no need for a button-class explanation eq 0   means that you will select one element from the jQuery object  in this case element 0  thus the first element  http   docs jquery com Selectors eq index   selector  siblings siblingsSelector  will select all siblings  elements with the same parent  that match the siblingsSelector http   docs jquery com Traversing siblings expr   selector  parents parentsSelector  will select all parents of the elements matched by selector that match the parent selector  http   docs jquery com Traversing parents expr Thus    selector  parents  div eq 0     will match the first parent div of the elements matched by selector  You should have a look at the jQuery docs  particularly selectors and traversing   http   docs jquery com  http   docs jquery com Selectors http   docs jquery com Traversing

User · Answer

http   jsfiddle net qVGwh 6  Check this         MadonwebTest   click function          var id       MadonwebTest   closest  div   attr  id        alert id

User · Answer

This can be easily done by doing     this  closest  table   attr  id      You attach this to any object inside a table and it will return you the id of that table

User · Answer

JQUery has a  parents   method for moving up the DOM tree you can start there     If you re interested in doing this a more semantic way I don t think using the REL attribute on a button is the best way to semantically define  this is the answer  in your code   I d recommend something along these lines    lt p id  question1  gt       lt label for  input1  gt Volume   lt  label gt        lt input type  text  name  userInput1  id  userInput1    gt       lt button type  button  gt Check answer lt  button gt       lt input type  hidden  id  answer1  name  answer1  value  3 93e-6    gt   lt  p gt    and     button   click function          var correctAnswer     this  parent   siblings  input type hidden    val        var userAnswer     this  parent   siblings  input type text    val        validate userAnswer  correctAnswer           messages   html feedback         Not quite sure how your validate and feedback are working  but you get the idea

User · Answer

1     this  parent   attr  id      2   There must be a large number of ways  One could be to hide an element that contains the answer  e g    lt div gt      Volume    lt input type  text    gt       lt button type  button  gt Check answer lt  button gt       lt span style  display  hidden  gt 3 93e-6 amp lt  span gt       lt div gt  lt  div gt   lt  div gt    And then have similar jQuery code to the above to grab that      button   click function           var correct   Number   this  parent   children  span   text         validate    this  siblings  input   val   correct         this  siblings  div   html feedback         bear in mind that if you put the answer in client code then they can see it    The best way to do this is to validate it server-side  but for an app with limited scope this may not be a problem

User · Answer

Try this      button   click function            this  parents  div first   html

User · Answer

this  parents  div   attr  id

[jquery] Finding the id of a parent div using Jquery

Examples related to jquery

Examples related to dom

Examples related to semantics