如果我有一个HTML元素<input type="submit" value="Search" />
,则css选择器需要区分大小写:
input[value='Search']
匹配
input[value='search']
不匹配
我需要一个解决方案,其中不区分大小写的方法也适用。我正在使用 Selenium 2 和 Jquery ,所以两者的答案都是欢迎。
答案 0 :(得分:47)
CSS4 (CSS Selector Level 4) 增加对它的支持:
input[value='search' i]
它是&#34;我&#34;在最后,这诀窍。
更广泛的采用从2016年中期开始:Chrome(自v49以来),Firefox(来自v47?),Opera和其他一些人拥有它。 IE不和Edge还没有。见“Can I use” ...
答案 1 :(得分:32)
它现在存在于CSS4中,请参阅this answer。
否则,对于jQuery,您可以使用...
$(':input[name]').filter(function() {
return this.value.toLowerCase() == 'search';
});
你也可以制作一个自定义选择器......
$.expr[':'].valueCaseInsensitive = function(node, stackIndex, properties){
return node.value.toLowerCase() == properties[3];
};
var searchInputs = $(':input:valueCaseInsensitive("Search")');
如果执行此操作一次,自定义选择器有点过分,但如果您需要在应用程序中多次使用它,那么这可能是一个好主意。
是否可以为任何属性设置这种自定义选择器?
当然,请查看以下示例。它有点复杂(: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")');
您可以使用eval()
使该字符串成为一个数组,但我觉得这样做更舒服(并且您不会意外地执行您在选择器中放置的任何代码)。
相反,我在,
分隔符上拆分字符串,然后在每个数组成员的任一侧剥去空格'
和"
。请注意,引号内的,
不会按字面意思处理。没有理由按字面意思要求,但你总是可以对这种可能性进行编码。我会把它留给你。 :)
我认为map()
不具备最佳浏览器支持,因此您可以明确地迭代args
数组或augment the Array
object。
答案 2 :(得分:7)
input[value='Search'] matches
input[value='search' i] Also matches in latest browsers
支持: 版本:Chrome&gt; = 49.0,Firefox(Gecko)&gt; = 47.0,Safari&gt; = 9
答案 3 :(得分:1)
单独使用选择器无法做到这一点,请尝试:
$('input').filter(function() {
return $(this).attr('value').toLowerCase() == 'search';
});