Writing jQuery selector case-insensitive version
jquery, jquery-selectors
Solution
To do a case-insensitive attribute selection, you need to write a custom selector function.
$.expr[':'].iAttrStart = function(obj, params, meta, stack) {
var opts = meta[3].match(/(.*)\s*,\s*(.*)/);
return (opts[1] in obj) && (obj[opts[1]].toLowerCase().indexOf(opts[2].toLowerCase()) === 0);
};
You can use this like this:
$('input:iAttrStart(type, r)')
This will match any `input` elements whose `type` attribute begins with `R` or `r` (so it would match `RADIO`, `radio`, `RESET` or `reset`). This is a pretty silly example, but it should do what you need.
Re the comment that the function is hard to understand, I'll explain it a little.
$.expr[':'].iAttrStart = function(obj, params, meta, stack) {
This is the standard signature for creating custom selectors.
var opts = meta[3].match(/(.*)\s*,\s*(.*)/);
`meta` is an array of details about the call. `meta[3]` is the string passed as the parameter. In my example, this is `type, r`. The regex matches `type` and `r` separately.
return (opts[1] in obj) && (obj[opts[1]].toLowerCase().indexOf(opts[2].toLowerCase()) === 0);
Return if both these are true:
- The requested attribute exists on this object (`opts[1] in obj`)
- The search term (changed to lower-case) is found at the very beginning of the element's attribute value, also changed to lower case.
I could have made this easier to read using jQuery syntax rather than native JS syntax, but that would have meant reduced performance.
Problem
I'm using following line and I would like to make it case-insensitive: ``` var matches = $(this).find('div > span > div#id_to_find[attributeName ^= "filter"]'); if (matches.length > 0) { } ``` My question is that how can I make the selector `^=` to be case-insensitive? Maybe changing to filter and then some regexp?