CODEWITHSUNDEEP
jqueryhtml
PabloB
PabloB

Reputation: 95

Getting element's ID on click

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??

Upvotes: 2

Views: 147

Answers (2)

lonesomeday
lonesomeday

Reputation: 237827

First, you should use this if you mean the element where the handler is bound. Consider this:

<a href="#content" id="a"><span id="b">foo</span></a>

If there is a handler bound on the a element, this.id will be a while event.target.id will be b. Unless you mean event.target, use this.

Second, id values are not inherited (indeed, since they must be unique, it would make no sense if they were). You either need to give the a elements an id value, or you need to traverse through your document and find the relevant element to get its id.

You could do this with code like this:

$(this).closest('div').prev().attr('id')

However your h2 tag doesn't actually have an id, so you would need to give it one. If you want to get the text of that tag, use text:

$(this).closest('div').prev().text()

Upvotes: 2

Mathew Thompson
Mathew Thompson

Reputation: 56429

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

Upvotes: 6

Related Questions