Question

There must be something simple I am missing. I’m trying to get the index of the element but keep getting -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

I tend to steer clear of using index() in jQuery 1.3.2 and previous as it feels unintuitive to use. I simply use

$(this).prevAll().length

to get the index. calling size() on prevAll() simply returns the value of the length property, so I prefer to just use length directly and skip the extra function call.

For example,

$("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, you’ll simply be able to call index() on a jQuery object to get the index of the first element in the object.