Если у меня есть элемент HTML <input type="submit" value="Search" />, селектор css должен быть чувствителен к регистру:
input[value='Search'] соответствует
input[value='Search'] не соответствует
Мне нужно решение, в котором также работает метод без учета регистра. Я использую Selenium 2 и 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(), чтобы сделать эту строку массивом, но я считаю, что сделать это таким образом более комфортным (и вы не будете случайно выполнять какой-либо код, который вы размещаете в своем селекторе).
Вместо этого я разделяю строку на разделителе ,, а затем удаляет пробелы, ' и " с каждой стороны каждого элемента массива. Обратите внимание, что a , внутри цитаты не будет обрабатываться буквально. Нет причин, по которым нужно требовать буквально, но вы всегда могли бы противопоставить эту возможность. Я оставлю это до вас.:)
Я не думаю, что map() имеет лучшую поддержку браузера, поэтому вы можете эксплоретироваться по массиву args или добавьте объект Array.
CSS4 (CSS Selector Level 4) добавляет поддержку для него:
input[value='search' i]
Это "i" в конце, которое делает трюк.
Более широкое внедрение началось в середине 2016 года: Chrome (с версии v49), Firefox (с версии v47?), Opera и некоторые другие. IE not и Edge еще нет. См. "Могу ли я использовать" ...
input[value='Search'] matches
input[value='search' i] Also matches in latest browsers
Поддержка: версия: Chrome >= 49.0, Firefox (Gecko) >= 47.0, Safari >= 9
Вы не можете сделать это только с помощью селекторов, попробуйте:
$('input').filter(function() {
return $(this).attr('value').toLowerCase() == 'search';
});