title: Determine the .length index of the <li> item clicked
body: <p>I have a set of <code>&lt;li&gt;</code> items:</p>
  
  <pre><code>&lt;ul id="listings"&gt;
  &lt;li id="item-0"&gt;
    &lt;div class="content"&gt;hi&lt;/div&gt;
  &lt;li&gt;
  &lt;li id="item-1"&gt;
    &lt;div class="content"&gt;hi&lt;/div&gt;
  &lt;li&gt;
  &lt;li id="item-2"&gt;
    &lt;div class="content"&gt;hi&lt;/div&gt;
  &lt;li&gt;
  &lt;/ul&gt;
  //etc
  </code></pre>
  
  <p><strong>My question is: How do I determine the index number of the clicked <code>&lt;li&gt;</code> item?</strong>.
  Like if I click: <code>&lt;li id="item-1"&gt;</code> I want to know it's the second <code>&lt;li&gt;</code> index.</p>
  
  <p>I can easily determine the total lenght of all <code>&lt;li&gt;</code>'s by doing:</p>
  
  <pre><code>document.querySelectorAll('#listings li').length;
  </code></pre>
  
  <p>And I currently have the following click listener:</p>
  
  <pre><code>document.getElementById("listings").addEventListener("click", function(e) {
      if(e.target &amp;&amp; e.target.nodeName == "LI") {
          console.log(e.target.id + " was clicked");
      }
  });
  </code></pre>