web-dev-qa-db-fra.com

Cas de sélecteur CSS insensible aux attributs

Si j'ai un élément HTML <input type="submit" value="Search" /> Un sélecteur CSS doit être sensible à la casse:

input[value='Search'] allumettes

input[value='search'] ne correspond pas

J'ai besoin d'une solution lorsque l'approche insensible à la casse fonctionne aussi. J'utilise selenium 2 et jQuery, donc les réponses pour les deux sont les bienvenues.

jqueryjquery-selectorscss-selectorscase-insensitiveselenium-webdriver
35
Alp

Il existe maintenant dans CSS4, voir cette réponse .

Sinon, pour JQuery, vous pouvez utiliser ...

$(':input[name]').filter(function() {
   return this.value.toLowerCase() == 'search';
});

jsfiddle .

Vous pouvez également faire un sélecteur personnalisé ...

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

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

jsfiddle .

Le sélecteur personnalisé est un peu surpuissant si cela le faisait une fois, mais si vous devez l'utiliser plusieurs fois dans votre application, c'est peut-être une bonne idée.

Mettre à jour

Est-il possible d'avoir ce type de sélecteur personnalisé pour un attribut?

Bien sûr, vérifiez l'exemple suivant. C'est un peu compliqué (syntaxe telle que :input[value:toLowerCase="search"] Peut avoir été plus intuitive), mais ça marche :)

$.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 .

Vous pouvez probablement utiliser eval() _ pour faire cette chaîne un tableau, mais je trouve le faire de cette façon plus confortable (et vous n'exécuterez pas accidentellement aucun code que vous placez dans votre sélecteur).

Au lieu de cela, je sépare la chaîne sur , Délimiter, puis enveloppe Whitpace, ' Et " D'un côté de chaque membre de la matrice. Notez qu'un , À l'intérieur d'une citation ne sera pas traité littéralement. Il n'y a aucune raison pour laquelle on devrait être nécessaire littéralement, mais vous pouvez toujours coder contre cette possibilité. Je vais laisser ça à toi. :)

Je ne pense pas map() a le meilleur support de navigateur afin que vous puissiez expliquer expliquer expliquer sur le tableau args ou augmenter le Array objet .

33
alex

CSS4 (niveau de sélecteur CSS 4) Ajoute prise en charge:

input[value='search' i]

C'est le "je" à la fin qui fait l'affaire.

Adoption plus large a commencé mi-2016: Chrome (depuis v49), Firefox (de V47?), Opera et d'autres l'ont. IE pas et bord pas encore. Voir "Puis-je utiliser" ...

55
Robert Siemer

Vous ne pouvez pas le faire avec des sélecteurs seuls, essayez:

$('input').filter(function() {
    return $(this).attr('value').toLowerCase() == 'search';
});
1
Khez