Sélecteur CSS insensible à la casse pour les atsortingbuts
Si j’ai un élément HTML un sélecteur css doit être sensible à la casse:
input[value='Search'] correspond
input[value='search'] ne correspond pas
J’ai besoin d’une solution où l’approche insensible à la casse fonctionne aussi. J’utilise Selenium 2 et Jquery , les réponses sont donc les bienvenues.
- Débordement de texte multiligne sur plusieurs navigateurs avec points de suspension ajoutés dans une largeur et une hauteur fixes “
- Nombre de listes ordonnées nestedes en HTML
- jquery IE Fadein et Fadeout Opacity
- Comment connecter des divs HTML avec des lignes?
- Comment réparer un en-tête sur le défilement
- Comment atténuer les images d’arrière-plan de la boucle?
- Différence entre le sélecteur CSS et le filtre jQuery?
- JQM (jQueryMobile) Les éléments ajoutés dynamicment ne s’affichant pas correctement et CSS n’est pas appliqué
- redimensionner automatiquement le texte (taille de la police) lors du redimensionnement de la fenêtre?
- Quels sélecteurs CSS3 sont réellement pris en charge par jQuery, par exemple: nth-last-child ()?
Il existe maintenant en CSS4, voir cette réponse .
Sinon, pour jQuery, vous pouvez utiliser …
$(':input[name]').filter(function() { return this.value.toLowerCase() == 'search'; });
jsFiddle .
Vous pouvez également créer un sélecteur personnalisé …
$.expr[':'].valueCaseInsensitive = function(node, stackIndex, properties){ return node.value.toLowerCase() == properties[3]; }; var searchInputs = $(':input:valueCaseInsensitive("Search")');
jsFiddle .
Si vous le faites une fois, le sélecteur personnalisé est un peu excessif, mais si vous devez l’utiliser plusieurs fois dans votre application, cela peut être une bonne idée.
Mettre à jour
Est-il possible d’avoir ce type de sélecteur personnalisé pour n’importe quel atsortingbut?
Bien sûr, consultez l’exemple suivant. C’est un peu compliqué (une syntaxe telle que :input[value:toLowerCase="search"] peut-être é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 pourriez probablement utiliser eval() pour transformer cette chaîne en tableau, mais je trouve que le faire de cette façon est plus pratique (et vous n’exécuterez pas accidentellement le code que vous avez placé dans votre sélecteur).
Au lieu de cela, je scissionne la chaîne , délimiteur, puis je supprime les espaces, ' et " chaque côté de chaque membre du tableau. Notez que , dans une citation, il ne sera pas traité littéralement. Il n’y a aucune raison de l’exiger, mais vous pouvez toujours coder contre cette possibilité, je vous la laisserai 🙂
Je ne pense pas que map() prenne en charge de manière optimale le navigateur. Vous pouvez donc explicitement effectuer une itération sur le tableau args ou augmenter l’object Array .
CSS4 (CSS Selector Level 4) ajoute le support pour cela:
input[value='search' i]
C’est le “i” à la fin qui fait l’affaire.
L’adoption plus large a commencé mi-2016: Chrome (depuis la v49), Firefox (à partir de la v47?), Opera et certains autres l’ont. IE pas et Edge pas encore. Voir “Puis-je utiliser” …
input[value='Search'] matches input[value='search' i] Also matches in latest browsers
Support: version: Chrome> = 49.0, Firefox (Gecko)> = 47.0, Safari> = 9
Vous ne pouvez pas le faire avec des sélecteurs seuls, essayez:
$('input').filter(function() { return $(this).attr('value').toLowerCase() == 'search'; });