jQuery uncaught exception: syntax error, unrecognized expression [ tabindex="something"]

Question

All of a sudden some UI functionlities in our site are not working and I'm getting the error message:

jQuery uncaught exception: syntax error, unrecognized expression [ tabindex="something"]

THIS IS MY CODE:

var thumb_src = jQuery('a[name="thumb-image"] img[src*=' + sku + ']').attr('src');
jQuery( 'a[ tabindex=' + thumb_src + ']' ).prevAll().removeClass('selectedThumb');
jQuery( 'a[ tabindex=' + thumb_src + ']' ).addClass( 'selectedThumb' );
jQuery( 'a[ tabindex=' + thumb_src + ']' ).nextAll().removeClass('selectedThumb');

It was working fine until jQuery was upgraded to the latest and I believe that is the cause. Am I doing something illegal in the statements above? Thanks for any input or help on this!

Answer 1

Most likely any . or / characters in your thumb_src are breaking the attribute selectors in your last three lines as they are special CSS characters.

Try the double quotes inside those selectors so they're taken literally (even though you really shouldn't be using anything but numeric values for tabindex):

jQuery('a[tabindex="' + thumb_src + '"]')

The API docs say that these quotes are mandatory in jQuery attribute selectors anyway.

Answer 2

The attr() function was changed as of jQuery 1.6, use prop() instead:

var thumb_src = jQuery('a[name="thumb-image"] img[src*=' + sku + ']').prop('src');

See this question