I want to get an id as a string of a div that was clicked. is it possible to do?

HTML

<div id="test">
    <div class='button' id="a" ><p>Click 1</p></div>
    <div class='button' id="b" ><p>Click 2</p></div>
    <div class='button' id="c" ><p>Click 3</p></div>
    <div class='button' id="d" ><p>Click 4</p></div>
</div>

I can do something like this:

  $("#a").click(function() {
      /* do some action with this div */
  });

But I want to detect the id of just clicked div, because I will have a lot of divs like this, and it doesn't make sense to rewrite the same code over and over again.

I want to get an id as a string of a div that was clicked. is it possible to do?

HTML

<div id="test">
    <div class='button' id="a" ><p>Click 1</p></div>
    <div class='button' id="b" ><p>Click 2</p></div>
    <div class='button' id="c" ><p>Click 3</p></div>
    <div class='button' id="d" ><p>Click 4</p></div>
</div>

I can do something like this:

  $("#a").click(function() {
      /* do some action with this div */
  });

But I want to detect the id of just clicked div, because I will have a lot of divs like this, and it doesn't make sense to rewrite the same code over and over again.

• javascript
• jquery

• 1 Although your HTML is fine, I think I'd choose another class name for your divs: IMO, 'button' can be confusing. – frenchie Commented Jan 22, 2013 at 21:41
• 1 Also, I don't think you need to have a <p> tag inside your divs; just put the text directly inside the div. As a general rule, when you have a box inside a box (think of tags as boxes) you can probably simplify the HTML by removing the inner box and apply the css of the inner box to the outter box. – frenchie Commented Jan 22, 2013 at 22:09

3 Answers 3

$("#a").click(function() {
    var id = this.id;
});

If you need to set click event for all .button elements, here is the short way:

$(".button").click(function(e) {
    var id = this.id;  // or e.target.id;
});

$("div.button").click(function() {
    console.log(this.id);
});

$(this).attr('id')

will get you the id, But if you want to access the div you can use

$(this).parent('div')

this will only return if the immediate parent is a div, if want to find up you can use

$(this).parents('div')