Get the position of an item in a HTML list

Question

I need to know the position an item in HTML list.

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

$('ul').on("click", function(event){
  var target = event.target;
})

So when I get the first li as the target of the event. How can I get 0 as result for the item postion. The only way I can think about is to iterate over all items and compare them with the event target, but I wonder if there is a better way to solve this.

score 3 · Accepted Answer · answered Mar 04 '13 at 14:32

3

You could use:

$('ul').on("click", function(event){
  var target = event.target,
      index = $(target).index();
  console.log(target, index);
})

JS Fiddle demo.

Reference:

index().

answered Mar 04 '13 at 14:32

David Thomas

240,457
50
366
401

score 2 · Answer 2 · answered Mar 04 '13 at 14:32

2

var listItem = $(event.target);
alert('Index: ' + $('ul > li').index(listItem));

answered Mar 04 '13 at 14:32

Arkadiusz 'flies' Rzadkowolski

5,436
2
28
31

+1 - I like this answer because it shows that you can pass an argument into the `index` feature. – Travis J Jun 23 '13 at 21:52

score 1 · Answer 3 · answered Mar 04 '13 at 14:36

1

$('ul li').on("click", function(){
var index = $(this).index();
alert(index);
})

http://jsfiddle.net/6QZbT/

answered Mar 04 '13 at 14:36

Sam

2,892
1
17
26

Get the position of an item in a HTML list

3 Answers3