title: How to detect current input-text's index from an array of input-text with jquery
body: <p>I have an array of input text boxes simplified as bellow:</p>
  
  <pre><code>&lt;input type="text" name="quantity[3]" value="0"&gt;
  &lt;input type="text" name="quantity[6]" value="0"&gt;
  &lt;input type="text" name="quantity[7]" value="0"&gt;
  &lt;input type="text" name="quantity[11]" value="0"&gt;
  </code></pre>
  
  <p>Either of the two ways is acceptable for me, but I don't know how to do even one of them:</p>
  
  <p>When the 3rd input box (with has index 7) is changed, either of the two <code>alert()</code>s is acceptable for me:</p>
  
  <ul>
  <li>7 (because the real index of the 3rd text box is <code>7</code>)</li>
  <li>2 (because probably it will be counted from 0 and thus its index will be 2)</li>
  </ul>
  
  <p>My code that doesn't work is:</p>
  
  <pre><code>$(document).ready(function(){
      $('input[name^=quantity]').change(function(){
          alert($(this).index());
      });
  })
  </code></pre>
  
  <p>Link: <strong><a href="http://niamco.com/cp/problem.html" rel="nofollow">http://niamco.com/cp/problem.html</a></strong></p>
  
  <p>It is expected that when the user changes any of the <strong>Quantity</strong> text boxes, the text box's <code>val()</code> be alerted as well as their correct <code>index()</code>. We see that the <code>val()</code> is outputted correctly, but the <code>index()</code> is always returned <code>0</code>.</p>
  
  <p>As the <code>val()</code> is correct, we should be sure that jQuery is loaded well and working. So why shouldn't <code>index()</code> be true?</p>
  
  <p>Strange is that as I've researched, both <code>val()</code> and <code>index()</code> are jQuery functionalities. If <code>val()</code> was javascript base, it could be accepted. But now, one jquery Base function works, and the other does not!</p>