Get the id of a the item that is clicked

Question

I have this html code:

FOO
FOO2


        

Answer 1

something like this:

var id = $(this).attr('id');

More clearly:

$('b.edit').live('click', function(){
    var id = $(this).attr('id');

    // in this scope this.id works too
    // var id = this.id;
});

Answer 2

$('.edit').live('click', function() {
    alert( this.id );
});

Sample
http://jsfiddle.net/ck2Xk/

Answer 3

Try with this:

$('b.edit').click(function(e){ //When you use an event is better
                               //send the event variable to the 
                               //binding function.
    var id = e.target.id; //get the id of the clicked element.
   /*do your stuff*/
    $('.editP').focus();
});

Answer 4

Even though this is not a real answer to your question. I will try to explain why what your asking is not the way to go. Since you are new especially, since learing bad practices could be hard to unlearn. Allways try to search for an ID before finding an element by its Class. Also try to avoid giving every element the same class (and in this case ID to), just give it an encapsulating parent.

Furthermore, the id of an element is really specific and should preferably used to find / select / bind events to. An id should usually be unique for this to work, so in your case a couple of things could be optimized, lets say like:

<div id="foo"> 
  <b id="1">Foo</b>
  <b id="2">Other foo</b>
  <b id="3">Some foo</b>
</div>

Now if you want to know which was clicked there are multiple ways to accomplish it, but a nice one is simply binding a parent its children (i.e <div id="foo"> .. </div>). This way you can alter the structure of your pretty fast, without changing all the classes and id's.

With jQuery you can get the attribute id using the .attr() function. However I told you the id was pretty specific and thus has its own rights in javascript world. An id can also be directly targeted ('DOMelement.id', but this would be too much to explain for now)

In two ways the <b> can be targetted:

Example a)

var b_elements = $("#foo").children();

Example b)

var b_elements = $("#foo").find('b');

We can add jQuery (or javascript events) to these found elements. The nice thing about jQuery is that it simplifies alot of work. So in your case if you would like to know an id of a certain clicked <b> field you could use a very verbose way:

b_elements.click(function()
{
  var clicked_element = $(this);
  alert(clicked_element.attr('id'));
});

Verbose because you can do it much much shorter, but who cares about a few bytes when your learning and this makes remembering functions and events alot easier. Say you wanted to get the class edit by finding the where you knew the id that was clicked:

b_elements.click(function()
{
  var clicked_element = $(this);
  alert(clicked_element.attr('class'));
});

And to conclude, the id of an element is ment to be unique because it makes searching through big documents alot faster. Also don't forget to look and learn plain javascript, as it helps coding in jQuery alot too, but not the other way around. Your given question would require a for loop in plain javascript since it cannot do a lookup by class nor id nor have they have a common parent.

Good luck with learning :)

Answer 5

$('.edit').click(function(){
   var theId = $(this).attr('id');
}

This will get you the ID of anything clicked with a class of .edit

Answer 6

Since nobody has shown the simplest method yet that doesn't even need jQuery to get the id:

$('.edit').click(function() {
    alert(this.id);
});

I never understand why people use jQuery for getting simple attributes which involves two jQuery function calls (and a bunch of overhead to create a jQuery object) instead of one direct attribute reference.