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?

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?

• javascript
• jquery

• this doesn't contain any php, html or css in the nature of the question. It is important to note that your title and the question you ask are very different things. There is no "order" in an unordered list, but you can access the id attribute without trouble as indicated in my answer. – Gabriel Commented Aug 30, 2010 at 7:54
• dude are you trying to dynamically generate li's id depending on their index? – Ayaz Alavi Commented Aug 30, 2010 at 8:10
• 1 You can loop through li using each function that passes 1st parameter as index. See this stackoverflow./questions/3598712/… – Ayaz Alavi Commented Aug 30, 2010 at 9:08
• 1 look at this live example for generating li idz depending on their index jsfiddle/w9qpj/1 – Ayaz Alavi Commented Aug 30, 2010 at 9:34

5 Answers 5

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.

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./click/
• Mode on attr: http://api.jquery./attr/

Alternatively to Gabriels answer:

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

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

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

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/w9qpj/1/ for live example.

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

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

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