Making name attribute selector case insensitive using jQuery

https://jquerytipsntricks.wordpress.com/

by jstenkvist

HTML

<h2>Making name attribute selector case insensitive using jQuery</h2>
<br/>
<span>Set all textbox border color as <red>RED</red> which contains name 'input' v1.1</span>
<br/>
<br/>
<div id="parent">
    <input type="button" id="btnYes" name="someinputName"></input>
    <input type="button" id="btnyes" name="SOMEinputNAME"></input>
    <input type="button" id="btnNo" name="someINputName"></input>
    <input type="button" id="btnno" name="someiNPutName"></input>
</div>

CSS

body {
    font: 11px/18px'lucida grande', tahoma, verdana, arial, sans-serif;
    color: #333;
}
h2 {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 10px;
    margin-bottom: 12px;
}
.boldSpan {
    color: #333;
    font-weight:bold;
}
span {
    color: #666;
    font-size: 11.5px;
}
input {
    width:100px;
    margin-right:10px;
}
red, {
    color: red;
}
.red {
    border: 2px solid red;
}

JavaScript

// Creating a custom expression 
// for case insensitive name attribute contains selector
$.expr[':'].nameCaseInsensitive = function (node, stackIndex, properties) {

console.log('This here: ' +properties);

console.log(node.id);
console.log('Lowercase: ' +node.id.toLowerCase());

console.log(properties[3] + ' found at ' + node.id.toLowerCase().indexOf(properties[3].toLowerCase()));
    return node.id.toLowerCase().indexOf(properties[3].toLowerCase()) > -1 ;
};

// and use it here to get all the input elements 
// where name contains word 'input' but case insensitive
//console.log($("#parent").contents().find('button[id^=:nameCaseInsensitive("btnYes")],[id^=:nameCaseInsensitive("btnNo")]'));
var $input = $('#parent input:nameCaseInsensitive("btnYes")');

// Add a class to the selected inputs
$input.addClass('red');