Jquery get index / position of sibling example

Question

Say I have the following html

<ul> <li id="a">a</li> <li id="b">b</li> <li id="c">c</li> </ul> <ul> <li id="d">d</li> <li id="e">e</li> <li id="f">f</li> </ul> 

If I used jQuery to grab the $ ('# e') element, how do I determine the position of the position / index e relative to my siblings d and f? In other words, I expect that the value 1 (if the index is based on zero) will be returned, or 2 (if the index is one), because this is the second element in the ul list.

Answer 1

Simple: var idx = $('#e').index() // zero based

Answer 2

You can use .index() to get an index based on the zero of an element relative to your siblings.

 $('#e').index(); 

http://jsfiddle.net/LXS9F/

Answer 3

You can also try the following:

 $(function() { $('ul li').each(function(idx, e) { $(this).on('click', function() { alert(idx); }); }); }); 

The only problem is that it will index all li on the whole page.

Edit

This gives an index of the entire contents of li .

 $(function() { $('ul li').each(function(idx, e) { $(this).on('click', function() { alert($('#' + $(this).attr('id')).index()); }); }); }); 

Answer 4

You can also use var idx = $("#e").prevAll().size()

Answer 5

 function getIndex(id) { $('ul > li').each(function() { if ($(this).attr('id') == id) { return i; } }); return 0; }