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: 
```
<ul id="listings">
  <li id="item-0" onclick="isClicked(0)">
    <div class="content">hi</div>
  </li>
  <li id="item-1" onclick="isClicked(1)">
    <div class="content">hi</div>
  </li>
  <li id="item-2" onclick="isClicked(2)">
    <div class="content">hi</div>
  </li>
//...

```

I would add an onclick function to the li. Using javascript you can collect the data.

```
function isClicked(number){
   alert("Clicked element: "+ number);
}

```
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/>