title: How do I know which <li> element was clicked from a <ul>?
body: <p>I have an <code>&lt;ul&gt;</code>, and every <code>&lt;li&gt;</code> has a background 50px*50px but I want to know which <code>&lt;li&gt;</code> I click from the ul, the first, second, third.</p>
  
  <p>Each <code>&lt;li&gt;</code> has an image, so, when I click a <code>&lt;li&gt;</code> the image displays in another <code>&lt;div&gt;</code>, but when I want to change the image I want to know which li was the one clicked.</p>
  
  <pre><code>$("#ul element").on("click", "li", (function() {
      $("#thediv").hide();
      $("#thediv").empty().append('&lt;li&gt;' + this.innerHTML + '&lt;/li&gt;');
      $("#thediv").fadeIn("slow");
      })
  );
  </code></pre>
  
  <p>so when i click a li, the image go to the div, but i want to know which index have that li.(1,2,3,4,5, etc).</p>