jquery get the id/value of LI after click function

Question

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

How can I alert the id of the li item clicked(anything that can replace the id may be value or something else will also work)
please help
thanks in advance
Dave

Answer 1

$("#myid li").click(function() {
    alert(this.id); // get id of clicked li
    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