Sélection d'un élément qui a un élément spécifié

Question

Je suis un créateur de style d'un addon appelé Élégant qui vous permet d'ajouter votre propre feuille de style pour modifier l'interface utilisateur du site. Maintenant, j'ai un problème,

Pourrais-je sélectionner un élément qui a un élément spécifié ?

Exemple :

<div class='visitor_message'>
<div class='user_info'> Visitor Message Poster Info </div>
<div class='deleted_message'> This message is deleted by foobar </div>
</div>
<div class='visitor_message'>
<div class='user_info'> Visitor Message Poster Info </div>
<div class='message'> Undeleted Content </div>
</div>

Je travaille sur un style sur vBulletin pour supprimer un élément, qui contient un élément avec la classe supprimé, de sorte que les messages doux seront supprimés complètement. Si je ne fais que masquer .deletedmessage, la barre d'information sera toujours présente.

Donc, pour aller droit au but, est-il possible de sélectionner un élément qui a un élément spécifié ?

Je veux choisir .visitor_message qui contient .deletedmessage, est-ce possible ? Si c'est le cas, comment ? Si ce n'est pas le cas, quelqu'un peut-il m'expliquer comment le faire avec jQuery ou javascript ?

Answer 1

En ce qui concerne les CSS, vous demandez essentiellement un "sélecteur d'ancêtre". Ce type de sélecteur n'existe pas, du moins jusqu'à CSS3. L'explication très approximative est que CSS regarde généralement "dedans" et non pas dehors. Je me souviens avoir lu quelque part que permettre aux sélecteurs de regarder les parents/ancêtres aurait également un impact significatif sur les performances, mais je ne peux pas fournir de citation pour le moment.

Avec jQuery, vous utiliser .has() pour obtenir ce résultat :

$('.visitor_message').has('.deletedmessage')

(Notez que je vous montre la partie de la sélection. uniquement là.)