CSS选择器对属性不区分大小写 [英] CSS selector case insensitive for attributes

问题描述

如果我有一个HTML元素< input type =submitvalue =Search/> css选择器需要区分大小写： p>

输入[value ='Search'] 匹配

input [value ='search'] 不匹配

我使用 Selenium 2 和 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 阵列或增强数组 object 。

If I have an HTML element <input type="submit" value="Search" /> a css selector needs to be case-sensitive:

input[value='Search'] matches

input[value='search'] does not match

I need a solution where the case-insensitive approach works too. I am using Selenium 2 and Jquery, so answers for both are welcome.

解决方案

$(':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.

这篇关于CSS选择器对属性不区分大小写的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！