Question: i have the following DOM structure, based on the click of h4 i need to get the id of the corresponding class widget and make a post request to the server. I am a bit new to jQuery hence struggling. Could anyone please help?

```
<section id="home-sidebar" class="sidebar">
  <div class="menu">

    <div class="widget" id="4">
      <div class="title">
        <h4>First Text</h4>
        <p>Do some stuff</p>
      </div>
    </div>
    ..................................
...............

    <div class="widget" id = "56">
      <div class="title">
        <h4>N-th Text</h4>
        <p>Do some stuff</p>
      </div>
    </div>
  </div>
</section>

```

How do i know which h4 tag was clicked in jQuery? How do i get the corresponding "id" number of the widget? (Note ids are not consecutive they can be random as well)

Answer: 
You can use `.parents()` to find the DOM node with the id you wish to grab:

```
//bind a click handler to all h4 elements
$('h4').bind('click', function () {
    //find the id of the parent node that has the .widget class
    //since you are trying to get the id, you do not need to use the jQuery .attr() function which performs slower than the below code
    var id = $(this).parents('.widget')[0].id;
    $.get('path/to/server.file?id=' + id, function (data) {
       //this is the callback function for the server request
       alert('Server Response: ' + data);
    });
});

```

Documentation for `.parents()` : <http://api.jquery.com/parents/>
If you've done this:

```
$('h4').click(....)

```

You can do it this way:

```
$('h4').click(function(){
    alert($(this).attr('id'))
})

```