Problem mit jQuery-Index()

Question

Es muss etwas Einfaches fehlen, das ich vermisse. Ich versuche, den Index des Elements zu erhalten, aber immer -1 erhalten.

HTML:

<div id="rating_boxes"> 
<img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" /> 
<img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" /> 
<img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" /> 
<img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" /> 
<img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" /> 
<img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" /> 
<img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" /> 
<img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" /> 
<img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" /> 
<img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" /> 
</div> 

jQuery:

$("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'); 
}); 

Answer 1

Ich neige dazu, index() in jQuery 1.3.2 und früheren zu vermeiden, da es nicht intuitiv zu bedienen scheint. Ich verwende einfach

$(this).prevAll().length 

, um den Index zu erhalten. Rufen size() auf prevAll() einfach den Wert der length Eigenschaft zurück, so bevorzuge ich nur die Länge direkt zu verwenden und überspringen Sie den zusätzlichen Funktionsaufruf.

Zum Beispiel

$("img.ratingbox").hover(function() { 
    var index = $(this).prevAll().length; 
    alert(index); 
    $(this).attr('src', '/img/ratingbox-selected.gif'); 
}, function() { 
    $(this).attr('src', '/img/ratingbox.gif'); 
}); 

In jQuery 1.4, werden Sie einfach in der Lage sein index() auf einem jQuery-Objekt aufrufen, den Index des ersten Elements in dem Objekt zu erhalten.

Answer 2

index() gibt den Index des gegebenen Elements mit einer Liste von Elementen, nicht innerhalb eines übergeordneten Elements. Um den Index des angeklickten Bildes zu finden, müssen Sie alle Bilder finden, nicht die übergeordneten aller Bilder.

Sie wollen etwas wie folgt aus:

// Find all the images in our parent, and then find our index with that set of images 
var index = $(this).parent().find("img").index(this); 

Sie auch die ID-Auswahl anstelle der Klassenauswahl in Ihrem zweiten Beispiel. Statt

$("#rating_boxes").index($(this)); // your way - select by ID 

Sie

wollen

$(".rating_boxes").index(this); // select by class 

Answer 3

Wenn Sie die Position des Bewertungsfeld wissen wollen, eine robustere Art und Weise zu verwenden:

var index = $(this).prevAll('img').size(); 

Ie, berechnen die Anzahl von img Elementen vor diesem Element. Bei der Indexmethode müssen Sie zunächst das übergeordnete Element und dann alle img-Elemente auswählen. Das ist ein bisschen schneller.