title: How to get the index of current element with a class name inside a wrapper element
body: <p>Here is the html,</p>
  
  <pre><code>&lt;div id="wraper"&gt;
      &lt;div&gt;
          &lt;div class="test"&gt;1&lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;div class="test"&gt;2&lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;div class="test"&gt;3&lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;div class="test"&gt;4&lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;div class="test"&gt;5&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><code>$("#wraper").find(".test").eq(2);</code>This will select the  3rd <code>test</code> class inside <code>wraper</code>. </p>
  
  <p>I need to get that index(which I have passed as parameter to the <code>eq()</code>) while clicking on the <code>.test</code> div.</p>
  
  <p>When i click on the div with class name <code>test</code> , i need to get the index of that div inside the <code>wraper</code> div.</p>
  
  <pre><code>$(".test").click(function() {
      alert($(this).index());
  });
  </code></pre>
  
  <p>this code will always return 0, as the <code>test</code> div has a parent div. So If I use <code>$(this).parent().index()</code>, it will return the correct index. </p>
  
  <p>Is there any other alternative way to do this? Because in my real scenario there may be multiple levels of parents.</p>
  
  <p><a href="http://jsfiddle.net/J24yN/349/" rel="nofollow">Fiddle</a></p>