Problem with jQuery index()

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

Russ Cam · Accepted Answer · 2010-01-02 01:06:09Z

26

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.

edited Jan 2, 2010 at 1:06

answered Jan 2, 2010 at 0:58

Russ Cam

126k34 gold badges211 silver badges275 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rib3ye Over a year ago

I would upvote this 20 times if I could. .index() does not make sense.

user229044 · Accepted Answer · 2010-03-19 14:52:38Z

12

index() returns the index of the given element with a list of elements, not within a parent element. To find the index of the clicked image, you need to find all the images, not the parent of all the images.

You want something like this:

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

You're also using the id selector instead of the class selector in your 2nd example. Instead of

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

You want

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

edited Mar 19, 2010 at 14:52

answered Jan 2, 2010 at 0:48

user229044♦

241k41 gold badges348 silver badges350 bronze badges

Comments

Tatu Ulmanen · Accepted Answer · 2010-01-02 00:48:47Z

6

If you want to know the position of the rating box, a more robust way is to use:

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

I.e., calculate the number of img elements before this element. The index method requires you to first select the parent element, then all img elements inside. This is a tad faster.

answered Jan 2, 2010 at 0:48

Tatu Ulmanen

125k34 gold badges190 silver badges185 bronze badges

Comments

Olu · Accepted Answer · 2019-06-25 18:57:34Z

0

If there is a div or section which also contains img before this div, the solution

var index = $(this).prevAll().length;

will not work as it gives same answer as using

$(this).index();

The solution that works fine for any of these scenario is

var index = $(this).parent().find("img").index(this);

I have just applied these two methods to solve my problem.

answered Jun 25, 2019 at 18:57

Olu

871 silver badge9 bronze badges

Collectives™ on Stack Overflow

Problem with jQuery index()

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related