JQuery: .index() returns -1

Question

Here's main part of html:

 <div id="table"> <div class="table_item">asd</div> <div class="table_item">asd</div> <div class="table_item">asd</div> </div>

And JS (JQuery):

$(document).ready( function() { $(".table_item").click( function() { alert($("#table").index($(this))); }); });

click handling works but I ALWAYS get -1 from .index.

trying simply $(this).index(); shows the same result.

Please help! What's wrong with the code?

FishBasketGordo · Accepted Answer · 2011-08-12 21:05:07Z

Do this instead:

$(document).ready( function() { var ti = $('.table_item'); ti.click( function() { alert(ti.index(this)); }); });

EDIT: Someone had a post that was deleted that was correct, and I think a little better than my code above:

$(document).ready( function() { $('.table_item').click( function() { alert($(this).index()); }); });

Mrchief · Accepted Answer · 2011-08-12 20:59:56Z

You need to call index on a collection, in this case divs with class table_item

alert($(".table_item").index(this));

Robert · Accepted Answer · 2011-08-12 21:01:45Z

Since you are attaching a click() listener to $(".table_item"), you can reference the object by using $(this).

Try:

$(document).ready( function() { $(".table_item").click( function() { alert($(this).index()); }); });

3 Answers 3