Get the id of a the item that is clicked

Question

I have this html code:

FOO
FOO2


        

Answer 1

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:

 
  Foo
  Other foo
  Some foo

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

..

). 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 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 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 :)