Get current position of an element within the DOM

Question

I need to find an elements current position within the DOM (preferably when clicked).

With jQuery, I get it if I know the position beforehand:

$('li').get(3);

But there are times when I rely on $(this) to get the current position:

HTML:

http://jsfiddle.net/JBjeg/

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ul>

JS:

 $('li').click(function(){

     // this does not work
    console.log($(this).get());

    // this does, but I won't know which is clicked
    console.log($('li').get(3));

});

What's the best way for me to get the current position? Preferably as a number, so I can use it elsewhere.

Answer 1

You can use index to get the number of clicked element.

$(this).index();

Index will be Starting from 0

$('li').click(function(){
     // this does not work
    console.log($(this).get());   
    // Will get index
    console.log($(this).index());
    // this does, but I won't know which is clicked
    console.log($('li').get(3)); 
});

Update

According to your comment in the last answer

If you want image related to index of the clicked li you may try this

var index = $(this).index(); // Get index
var img = $("img").get(index); // image selector may vary

Fiddle

Answer 2

You can use .index()

Search for a given element from among the matched elements.

Example

$("li").index('ul')

Answer 3

You're looking for the index() method:

$('li').click(function(){
    console.log($(this).index());
});

(updated demo fiddle)

Answer 4

You can use index:

$('li').click(function() {
    console.log($(this).index());
});

And also, you can use $.each:

$('li').each(function(index) {
    console.log([$(this), index]);
});