Case Insensitive Jquery Attribute Selector

Case insensitive jQuery attribute selector

You can always use .filter():

var mans = $('input').filter(function() {
    return $(this).attr('name').toLowerCase().indexOf('man') > -1;
});

mans.css('background-color', 'black');

The key part here is toLowerCase() which lowercases the name attribute, allowing you to test it for containing man.

JQuery - How can I write a case-insensitive 'Attribute Contains' selector?

This is adapted from a post by Karl Swedburg on the jQuery docs page for the 'Attributes Contains Selector'. It uses a RegEx and the i case insensitive switch along with the filter function -

<img title="Star Wars"/>
<img title="Star Wars 2"/>
<img title="Star Wars 3"/>
<img title="Back To The Future"/>

var videoTitle = "star wars";
var re =  RegExp(videoTitle ,"i"); 
$('img[title]').filter(function() {
   return re.test(this.title);
}).each(function() {alert(this.title)});

The names of the three 'Star Wars' films should be alerted.

Demo - http://jsfiddle.net/FKBTx/3

Case-insensitive attribute-value selector with Jquery

You could use the jquery filter function like so

var meta = $('meta[name]').filter(function() {
    return this.name.toLowerCase() == 'somekindofid';
});

Based upon CSS selector case insensitive for attributes

http://jsfiddle.net/nickywaites/mkBvC/

Case insensitive attribute flag in conjunction with :visible selector

This happens because jQuery switches selector engines depending on the selector it's given. By default, when given a valid CSS selector jQuery passes it to the browser's native selector engine via document.querySelectorAll() to match elements. This is to maximize performance.

On the other hand, when given a non-standard selector, jQuery uses its own Sizzle engine to match elements so that it can evaluate its own non-standard selectors. :visible is one such selector, therefore only Sizzle understands it and it is required for matching.

The i flag is new to Selectors 4, and is not implemented in Sizzle. The latest version of every modern browser now supports this feature, so a selector like

$('input[name=email i]')

will work in every modern browser due to the use of document.querySelectorAll(). However in older versions that don't support it, this will be treated as an invalid CSS selector and handled by Sizzle as a result. In those cases, this selector would not work at all.

Adding jQuery's own :visible to the selector forces jQuery to use Sizzle. But since Sizzle doesn't recognize the i flag, the selector expression is deemed unrecognized.

You can resolve this by separating the :visible from the rest of your selector so that the browser can handle the i flag and Sizzle can handle :visible. You can do this using .filter():

$('input[name=email i]').filter(':visible')

CSS selector case insensitive for attributes

It now exists in CSS4, see this answer.

Otherwise, for jQuery, you can use...

$(':input[name]').filter(function() {
   return this.value.toLowerCase() == 'search';
});

jsFiddle.

You could also make a custom selector...

$.expr[':'].valueCaseInsensitive = function(node, stackIndex, properties){
     return node.value.toLowerCase() == properties[3];
};

var searchInputs = $(':input:valueCaseInsensitive("Search")');

jsFiddle.

The custom selector is a bit of overkill if doing this once, but if you need to use it many times in your application, it may be a good idea.

Update

Is it possible to have that kind of custom selector for any attribute?

Sure, check out the following example. It's a little convoluted (syntax such as :input[value:toLowerCase="search"] may have been more intuitive), but it works :)

$.expr[':'].attrCaseInsensitive = function(node, stackIndex, properties){
    var args = properties[3].split(',').map(function(arg) {
        return arg.replace(/^\s*["']|["']\s*$/g, '');  
    });
    return $(node).attr(args[0]).toLowerCase() == args[1];
};

var searchInputs = $('input:attrCaseInsensitive(value, "search")');

jsFiddle.

You could probably use eval() to make that string an array, but I find doing it this way more comfortable (and you won't accidentally execute any code you place in your selector).

Instead, I am splitting the string on , delimiter, and then stripping whitespace, ' and " either side of each array member. Note that a , inside a quote won't be treated literally. There is no reason one should be required literally, but you could always code against this possibility. I'll leave that up to you. :)

I don't think map() has the best browser support, so you can explictly iterate over the args array or augment the Array object.

JQuery how to .find() case insensitive?

Rather than building your check into your find, you should match off of "Manufacturer", and then search by the name of the manufacturer and the query both cast to lower case within the function

$(xml).find("Manufacturer").each(function(i){
  console.log($(this)[0].attributes.name.value.toLowerCase().indexOf(query.toLowerCase()) >= 0;
})

Jquery case insensitive select

 $(':input[name]').filter(function() {
   return this.name.toLowerCase() == 'something-really.etc';
 });

jQuery .attr() seems to be case sensitive

If you replace attr() with the javascript equivalent getAttribute(), it seems to not be case sensitive.

The only drawback is that you have to get() the js object first :

sel.get(0).getAttribute("validationMessage")

See the result here

---

Related Topics