Question

I have a few Collapsible segments in my Code which i have implemented using jQuery.

Like this:

<h2 class="expand">Link1</h2>
                <div class="collapse">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
                    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
                    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore 
                    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
                    qui officia deserunt mollit anim id est laborum.</p>                
                    <p class="top"><a href="#content">Top of page</a></p>
                </div>

There are a few more identical sections like the code above.

I want to get the ID of each of these headings when i click it . Say, when i click “Link1”, i want its ID to Pop-up.

I have already defined the function for displaying the id in a pop-up. Here it is :

 $(document).ready(function () {
        $("a").click(function (event) {
          alert(event.target.id);
        });
  });

Whenever i run the application and click on (say) “Link1”, I get a blank output. Declaring seperate classes for all the links seems to be an option but i want to do it otherwise..
Can anyone suggest any alternative as to how to get the Id’s of these elements??

Answer 1

Your supplied markup suggests that you haven’t given an id to these elements. Try giving them an ID, like so:

<a id="contentLink" href="#content">Top of page</a>

Then you can do:

 $(document).ready(function () {
    $("a").click(function (event) {
        alert($(this).attr("id"));
    });
 });

Edit: or if when you say “ID”, you actually mean href (as your markup has href attributes), then you can do:

$(document).ready(function () {
    $("a").click(function (event) {
        alert($(this).attr("href"));
    });
 });