Question: I have a set of `<li>` items:

```
<ul id="listings">
<li id="item-0">
  <div class="content">hi</div>
<li>
<li id="item-1">
  <div class="content">hi</div>
<li>
<li id="item-2">
  <div class="content">hi</div>
<li>
</ul>
//etc

```

**My question is: How do I determine the index number of the clicked `<li>` item?**.
Like if I click: `<li id="item-1">` I want to know it's the second `<li>` index.

I can easily determine the total lenght of all `<li>`'s by doing:

```
document.querySelectorAll('#listings li').length;

```

And I currently have the following click listener:

```
document.getElementById("listings").addEventListener("click", function(e) {
    if(e.target && e.target.nodeName == "LI") {
        console.log(e.target.id + " was clicked");
    }
});

```

Answer: 
```
var ulLength = document.getElementById('listings');
var elements = [].slice.call(ulLength.childNodes);
//[].slice.call() is used to convert array-like objects/collections into an array

function getSiblings() {
    var _s = [];
    elements.forEach(function (i, d) {
        if (i.nodeType === 1) //prevents text nodes to be counted as siblings
        _s.push(i);
    });

    return _s;
}

function getElmIndex(elm) {
    var _siblings = getSiblings();
    for (var i = 0; i < _siblings.length; i++) {
        if (!(_siblings[i] && _siblings[i] !== elm)) {
            return i;
        }
    }
}

elements.forEach(function (elm, d) {
    elm.addEventListener("click", function (e) {
        var _index = getElmIndex(this);

        alert("Index: " + _index);
    });
});

```

[Fiddle Link](http://jsfiddle.net/P3M6s/4/)
If using Jquery is not a problem, I suggest the use of the `index()` method: <http://jsfiddle.net/JLkPs/> .

Source: <http://api.jquery.com/index/>