title: Problem with jQuery index()
body: <p>There must be something simple I am missing.  I'm trying to get the index of the element but keep getting -1.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="rating_boxes"&gt;
  &lt;img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" /&gt;
  &lt;img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" /&gt;
  &lt;img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" /&gt;
  &lt;img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" /&gt;
  &lt;img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" /&gt;
  &lt;img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" /&gt;
  &lt;img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" /&gt;
  &lt;img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" /&gt;
  &lt;img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" /&gt;
  &lt;img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$("img.ratingbox").hover(function() {
      var index = $(this).parent().index(this);
              // have also tried $("#rating_boxes").index(this);
              // and $("#rating_boxes").index($(this));
              // and $(this).parent().index($(this));
      alert(index);
      $(this).attr('src', '/img/ratingbox-selected.gif');
  }, function() {
      $(this).attr('src', '/img/ratingbox.gif');
  });
  </code></pre>