jQuery 属性的 CSS 选择器不区分大小写
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5671238/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS selector case insensitive for attributes
提问by Alp
If I have an HTML element <input type="submit" value="Search" />a css selector needs to be case-sensitive:
如果我有一个 HTML 元素，<input type="submit" value="Search" />一个 css 选择器需要区分大小写：
input[value='Search']matches
input[value='Search']火柴
input[value='search']does not match
input[value='search']不匹配
I need a solution where the case-insensitive approach works too.I am using Selenium 2and Jquery, so answers for both are welcome.
我需要一个不区分大小写的方法也可以工作的解决方案。我正在使用Selenium 2和Jquery，因此欢迎对两者进行回答。
采纳答案by alex
It now exists in CSS4, see this answer.
它现在存在于 CSS4 中，请参阅此答案。
Otherwise, for jQuery, you can use...
否则，对于 jQuery，您可以使用...
$(':input[name]').filter(function() {
return this.value.toLowerCase() == 'search';
});
You could also make a custom selector...
您还可以制作自定义选择器...
$.expr[':'].valueCaseInsensitive = function(node, stackIndex, properties){
return node.value.toLowerCase() == properties[3];
};
var searchInputs = $(':input:valueCaseInsensitive("Search")');
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 :)
当然，请查看以下示例。这有点令人费解（例如:input[value:toLowerCase="search"]可能更直观的语法），但它有效:)
$.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")');
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).
您可能会使用eval()该字符串来使该字符串成为数组，但我发现这样做更方便（而且您不会意外地执行您放置在选择器中的任何代码）。
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. :)
相反，我在,分隔符上拆分字符串，然后剥离空格，'以及"每个数组成员的任一侧。请注意，,引号内的 a 不会按字面意思处理。没有理由从字面上要求一个人，但您总是可以针对这种可能性进行编码。我会把它留给你。:)
I don't think map()has the best browser support, so you can explictly iterate over the argsarray or augment the Arrayobject.
我认为没有map()最好的浏览器支持，因此您可以显式地遍历args数组或扩充Arrayobject。
回答by Robert Siemer
CSS4 (CSS Selector Level 4)adds support for it:
CSS4 (CSS Selector Level 4)添加了对它的支持：
input[value='search' i]
It's the "i" at the end which does the trick.
是最后的“i”起作用了。
Broader adoption started mid-2016: Chrome (since v49), Firefox (from v47?), Opera and some others have it. IE not and Edge not yet. See “Can I use”...
更广泛的采用始于 2016 年年中：Chrome（自 v49 起）、Firefox（自 v47 起？）、Opera 和其他一些拥有它。IE 没有，Edge 还没有。请参阅“我可以使用吗”...
回答by ankit
input[value='Search'] matches
input[value='search' i] Also matches in latest browsers
Support: version : Chrome >= 49.0, Firefox (Gecko) >= 47.0, Safari >= 9
支持：版本：Chrome >= 49.0、Firefox (Gecko) >= 47.0、Safari >= 9
回答by Khez
You can't do it with selectors alone, try:
您不能单独使用选择器来做到这一点，请尝试：
$('input').filter(function() {
return $(this).attr('value').toLowerCase() == 'search';
});
