title: jquery index within a parent class
body: <p>I need a way to find the index number of one child element.</p>
  
  <p>here is the CSS of it</p>
  
  <pre><code>&lt;div class="parent"&gt;
      &lt;div class="son"&gt;&lt;/div&gt;
      &lt;div class="son"&gt;&lt;/div&gt;
      &lt;div class="son"&gt;&lt;/div&gt;
      &lt;div class="son"&gt;&lt;/div&gt;
      &lt;div class="son"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="parent"&gt;
      &lt;div class="son"&gt;&lt;/div&gt;
      &lt;div class="son"&gt;&lt;/div&gt;
      &lt;div class="son"&gt;&lt;/div&gt;
      &lt;div class="son"&gt;&lt;/div&gt;
      &lt;div class="son"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My jquery code is like this </p>
  
  <pre><code>var number = $(".son").index(this);
  </code></pre>
  
  <p>When I use this code, it will count the son as a whole. Eg, when I click on the second child element in the second parent class, it will give me a var number 7. I want the son class always start counting from zero.</p>