Question

I have an interesting situation on my hands. Perhaps its due to a brain fart because i’m working this late, but I have the strangest thing happening to me with .index()

Here is a jsfiddle

The problem is that when a select box change event handler gets triggered, it tries to find the index of the current select box. If the only elements on the page are select boxes, then the index it returns is correct. if there are other elements however, even if they are not select boxes, the .index() appears to return an index based on the total elements on the page, not just the $('select') elements.

Here is my event handler:

$('select').change(function() {
        alert(
            '$(\'select\').length: ' + $('select').length + "\n" +
            '$(\'select\').last().index(): ' + $('select').last().index() + "\n" +
            '$(this).index(): ' + $(this).index());
    });

If this is the correct behavior for some reason, can someome explain why it is?

Thanks in advance.

Answer 1

The index function returns the zero-based position of the element in relation to the immediate parent, and by default the tag names won’t matter. Use .index("select") to consider only the select tags.