jquery - How to get index of <li> element

Question

I was looking into post Find the position of an element within a list, and Mr cletus mentioned that to get index we have to use

var index = $(this).parent().children().index(this);

HTML:

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

My question is why $(this).index(this) does not work(it always renders 0), whereas $(this).html() renders proper html output. Can somebody explain?

Answer 1

Because $(this) references to the <li> element, and by using $(this).index(this), you are essentially asking the index of the current element inside itself - which obviously is 0.