CSS选择器对属性不敏感

时间:2011-04-15 00:35:04

标签: jquery jquery-selectors css-selectors case-insensitive selenium-webdriver

如果我有一个HTML元素<input type="submit" value="Search" />,则css选择器需要区分大小写:

input[value='Search']匹配

input[value='search']不匹配

我需要一个解决方案,其中不区分大小写的方法也适用。我正在使用 Selenium 2 Jquery ,所以两者的答案都是欢迎。

4 个答案:

答案 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';
});

jsFiddle

你也可以制作一个自定义选择器......

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

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

jsFiddle

如果执行此操作一次,自定义选择器有点过分,但如果您需要在应用程序中多次使用它,那么这可能是一个好主意。

更新

  

是否可以为任何属性设置这种自定义选择器?

当然,请查看以下示例。它有点复杂(: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")');

jsFiddle

您可以使用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';
});