jQuery get the id/value of <li> element after click function

Question

How can I alert the id of the <li> item clicked?

<ul id='myid'>   <li id='1'>First</li>   <li id='2'>Second</li>   <li id='3'>Third</li>   <li id='4'>Fourth</li>   <li id='5'>Fifth</li> </ul> 

(Anything that can replace the id may be value or something else will also work.)

Answer 1

$("#myid li").click(function() {     alert(this.id); // id of clicked li by directly accessing DOMElement property     alert($(this).attr('id')); // jQuery's .attr() method, same but more verbose     alert($(this).html()); // gets innerHTML of clicked li     alert($(this).text()); // gets text contents of clicked li }); 

If you are talking about replacing the ID with something:

$("#myid li").click(function() {     this.id = 'newId';      // longer method using .attr()     $(this).attr('id', 'newId'); }); 

Demo here. And to be fair, you should have first tried reading the documentation:

• http://api.jquery.com/category/selectors/
• http://api.jquery.com/category/events/
• http://api.jquery.com/attr/

Answer 2

If you change your html code a bit - remove the ids

<ul id='myid'>   <li>First</li> <li>Second</li> <li>Third</li> <li>Fourth</li> <li>Fifth</li> </ul> 

Then the jquery code you want is...

$("#myid li").click(function() {     alert($(this).prevAll().length+1); });​ 

You don't need to place any ids, just keep on adding li items.

Take a look at demo

Useful links

• jQuery prevAll