Menu
Given this HTML:
<div class="OpenIDSelector">some text</div>
Why does this JQuery selector match it on some browsers and some pages, but not on others?
$('.OpenIdSelector')
NOTE: I ran into this problem and solved it myself, but it was annoying and I didn't find it on StackOverflow already, so I'm posting it as a Q&A pair so someone else won't waste an hour like I did.
439
jQuery attribute value selectors are generally case-sensitive.
Since its inception, CSS has been a weird language from the case perspective, it is case-insensitive by definition, but in reality it is more of a "hybrid": properties and values are case-insensitive, while selectors are (mostly) case-sensitive.
jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors. All selectors in jQuery start with the dollar sign and parentheses: $().
Turns out JQuery's class selector uses the new javascript method getElementsByClassName if the browser supports it. This method is case-insensitive on quirks-mode pages, and case-sensitive on non-quirksmode (aka standards-compliant) pages. Sure, it's usually obvious that the cases are different, but when the text is stuck in the middle of a long, complex selector it was hard to see. Apparently there are lots of case-sensitive differences between standards and quirks to watch out for.
Moral of the story: match case of everything in your HTML (element names, CSS classes, etc.) because you never know when a change to a browser or standard or library might invalidate your assumption about case-insensitivity.
176
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
