how to get en id of clicked element jquery

Question

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.

Answer 1

$("#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;
});

Answer 2

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

Answer 3

$(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')