Find the clicked li number

Question

I have a standard list...

        <ul>
            <li><a href="#">blah 1</a></li>
            <li><a href="#">blah 2</a></li>
            <li><a href="#">blah 3</a></li>
            <li><a href="#">blah 4</a></li>
        </ul>

And my jQuery:

$('ul li a').live('click', function() {
    var parent = $(this).parent('li');
});

What I want to find out is the parent li's position in the list of the clicked link e.g. clicking on blah 3 would give me 2, blah 4 would give 3 etc.

Any ideas?

Answer 1

The index method should do what you want.

Answer 2

$(function() {
    $('ul li a').live('click', function() {
        var parent = $(this).parent('li');
        alert(parent.prevAll('li').size());
    });
});

Answer 3

$('ul li a').live('click', function() {

    alert($(this).parent('li').index());

});

Will give you what you want, but keep in mind these are 0 based indexes -- ie the first line item is index 0, the last line item is 3.

jQuery index() method documentation

Answer 4

you can get the index of an element with jquery`s index

$('ul li a').live('click', function() 
{
    var index =  $(this).index();
});    

Answer 5

No need to jQueryfy this :

$('ul li a').live('click', function() {
    var position = 0;
    var currentNode = this;
    var firstNode = currentNode.parentNode.firstChild;
    while(firstNode != currentNode) {
        position++;
        currentNode = currentNode.previousSibling;
    }
    alert(position);
});