How to find the list <li> number using jquery?

Question

I want to find the order of the <li> the user has clicked. For eg.,

<ul>
    <li id="li1">This is list one</li>
    <li id="li2">This is list Two</li>
    <li id="li3">This is list three</li>
</ul>

When the user clicks on the list item 2, then i had to retrieve the id of that item as li2. How to achieve this, plz help

Answer 1

As pointed out below there are a couple of ways to add the event handlers. .bind is one, .click another. You can also create the function with your logic separately and refer to it in you bind or click event attachment.

<script type="text/javascript">
// version 1 with bind
  $(function(){
    $("li").bind("click", function(){alert(this.id);});
  })
</script>

<script type="text/javascript">
// version 2 with click and the separated method
  $(function(){
    $("li").click(listClickHandler);
  })
  function listClickHandler(){
    alert(this.id);
  }
</script>

separating your handler methods from your handler assignments makes a lot of sense when you are assigning event handlers on the fly or at different points in the page life cycle. The reason I use bind more often then click is that bind can be used for a lot of different events so it would be easy to imagine creating an event assignment factory:

<script type="text/javascript">
// version 3, event assignment factory
  function assign(selector, event, method){
    $(selector).bind(event, method);
  }
  $(function(){
    assign(".menu li", "click", listClickHandler);
    assign(".menu li", "mouseover", listHoverHandler);
  })
  function listClickHandler(){...};
  function listHoverHandler(){...};
</script>

hopefully this is more then you will ever need.

Answer 2

Alternatively to Gabriels answer:

$("li").click(function(){
   alert($(this).attr('id'));
});

Answer 3

Assuming there are just these li items on the page, the following would alert the id of the li if the user clicks on it.

<!-- on the side: you could leave out the type attribute, when using HTML5 -->
<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $("li").click(function(){
            alert($(this).attr("id");
        });                   
    });
</script>

• More on click: http://api.jquery.com/click/
• Mode on attr: http://api.jquery.com/attr/

Answer 4

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

There is no need for an extra $()-function call: this.id works as well.

Answer 5

you might need to loop through your li list. I think you want to generate li ids depending on their index relative to the parent ul. right? you can that with following code

$("ul li").each(function(index, node){

      $(this).click(function(){                     
           alert("You clicked on li"+index);                
      });
 }); 

See this http://www.jsfiddle.net/w9qpj/1/ for live example.

For fetching index of particular li you can use jQuery index function http://api.jquery.com/index/. or for fetching li using its index you can use jQuery eq function http://api.jquery.com/eq/

$('ul li').eq(2).css('background-color', 'red'); 

Above code will make ul's 3rd li element's bacground color red.