How to return the order that an item appears in a list in jQuery?

Question

I am trying to find out how to find the position that an item appears in a list. For example:

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

If I clicked on item 2, I would want to receive '2'. Is this possible?

Answer 1

It's possible by using jquery's index.

EDIT:

<ul id="my_list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

and in js,

var $my_list = $('#my_list');
$my_list.find('li').click(function(){
    var index = $('ul#my_list li').index(this);
    alert(index);
});

this should do what you need.

hope it helps, Sinan.

Answer 2

you could assign them IDs like

<ul>
  <li id="1">item 1</li>
  <li id="2">item 2</li>
  <li id="3">item 3</li>
</ul>

then :

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

or without IDs as Sinan says:

$("li").live('click', function(){ 
    alert($("li").index(this) + 1);
    }

+1 because indexing starts from 0