J'ai cette situation
<div class="hidden">
<input name="bar-foo" value="test">
</div>
<div class="hidden">
<input name="bar-foo-baz" value="test2">
</div>
<div class="nothidden">
<input name="bar-foo" value="test3"> <!-- should be selected -->
</div>
<div class="nothidden">
<input name="foo-bar-baz" value="test4"> <!-- should be selected -->
</div>
J'ai besoin de faire correspondre les entrées contenant le mot foo et bar, non contenues dans un div dont la classe est «cachée».
input[name*="foo"][name*="bar"]
Correspond aux quatre entrées.
:not(.hidden) input[name*="foo"][name*="bar"]
À mon avis, devrait correspondre aux entrées non contenues dans quelque chose avec la classe «.hidden», mais ce n'est pas le cas. Comment obtenir ce résultat?
Voici un jsfiddle https://jsfiddle.net/8dLbz5ws/1/
4 réponses
Votre deuxième sélecteur :not(.hidden) input[name*="foo"][name*="bar"] correspond à toutes les entrées car elles sont toutes contenues dans un élément qui n'a pas la classe masquée (par exemple le body ou un autre div parent).
Vous pouvez résoudre le problème en étant plus précis:
:not(.hidden) > input[name*="foo"][name*="bar"]
Cela éliminera ceux qui ont .hidden parents directs.
ÉDITER
Certains commentateurs aimeraient savoir comment sélectionner toutes les entrées en question qui ne sont contenues dans aucun .hidden élément (pas nécessairement un parent direct). C'est un problème plus difficile. Le suivant:
input[name*="foo"][name*="bar"]:not(.hidden input)
Ne semble pas fonctionner, je pense parce que :not n'autorise que des sélecteurs relativement simples à l'intérieur. La seule façon dont je peux penser est de mettre à jour toutes les entrées choisies, puis de les annuler la mise à jour lorsqu'elles se trouvent dans l'un des éléments .hidden:
input[name*="foo"][name*="bar"] { color: red; }
.hidden input[name*="foo"][name*="bar"] { color: black; }
Cela ne fonctionnera que si les paramètres par défaut (ie color: black) sont uniformes, j'en ai peur.
Essayez de cibler uniquement les enfants directs de vos classes qui ne sont pas masqués, comme ceci:
:not(.hidden) > input[name*="foo"][name*="bar"] { color:blue; }
Changer comme ça:
div:not(.hidden) input[name*="foo"][name*="bar"] {
background-color: yellow;
}
div:not(.hidden) input[name*="foo"][name*="bar"] {
background-color: yellow;
}<div class="hidden">
<input name="bar-foo" value="test">
</div>
<div class="hidden">
<input name="bar-foo-baz" value="test2">
</div>
<div class="nothidden">
<input name="bar-foo" value="test3"> <!-- should be selected -->
</div>
<div class="nothidden">
<input name="foo-bar-baz" value="test4"> <!-- should be selected -->
</div>Cela a fonctionné pour moi.
https://jsfiddle.net/1dd2a3sw/
div:not(.hidden) input[name*="foo"][name*="bar"] {
color:red;
}
De nouvelles questions
jquery
jQuery est une bibliothèque JavaScript, pensez également à ajouter la balise JavaScript. jQuery est une bibliothèque JavaScript multi-navigateur populaire qui facilite la traversée du Document Object Model (DOM), la gestion des événements, les animations et les interactions AJAX en minimisant les écarts entre les navigateurs. Une question marquée jQuery doit être liée à jQuery, donc jQuery doit être utilisée par le code en question et au moins les éléments liés à l'utilisation de jQuery doivent être dans la question.