Problema con el índice jQuery()

Question

Debe haber algo simple que me falta. Estoy tratando de obtener el índice del elemento, pero sigo obteniendo -1.

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

Tiendo a evitar el uso de index() en jQuery 1.3.2 y anteriores, ya que no es intuitivo de usar. Simplemente uso

$(this).prevAll().length 

para obtener el índice. llamando al size() en prevAll() simplemente devuelve el valor de la propiedad length, por lo que prefiero simplemente usar la longitud directamente y omitir la llamada a la función adicional.

Por ejemplo,

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

En jQuery 1.4, sólo podrá llamar index() en un objeto jQuery para obtener el índice del primer elemento en el objeto.

Answer 2

index() devuelve el índice del elemento dado con una lista de elementos, no dentro de un elemento padre. Para encontrar el índice de la imagen cliqueada, necesita encontrar todas las imágenes, no el padre de todas las imágenes.

quieres algo como esto:

// 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); 

También está utilizando el selector de ID en lugar del selector de clase en su segundo ejemplo. En lugar de

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

¿Quieres

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

Answer 3

Si desea conocer la posición de la caja de calificación, de una manera más sólida es utilizar:

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

Es decir, calcular el número de img elementos antes de este elemento. El método de índice requiere que primero seleccione el elemento padre, luego todos los elementos img dentro. Esto es un poco más rápido.