Bonjour à tous et à toutes,


Je travaille sur une page HTML qui a une liste d'événements (autrement dit un agenda).

Chaque événement dispose (entre autre) d'au moins un tag.

Derrière chaque tag, il y a un lien => quand on clique sur tel ou tel tag, on a/filtre tous les événements avec le même tag.

Je ne peux pas afficher plus de 30 événements dans mon agenda (ce qui est déjà pas mal me direz-vous)

Problème : Le client (qui gère 3 médiathèques) a des événements récurrents (genre "l'heure du conte" tous les mercredis dans chaque médiathèque). Avec 3 médiathèques, ces événements/éléments récurrents peuvent donc vite occuper une (bonne) partie de l'agenda.

Par conséquent, on (le client et moi) voudrait masquer ces événements récurrents. On a pensé leur attribuer un tag pour les différencier des autres événements (qui, eux, sont plus ou moins ponctuels).

(Sachant que mes seules "armes" sont le CSS et jQuery/Javascript (pour une raison qui serait trop longue à expliquer)) On voudrait faire un script (en jQuery ou Javascript peu importe) avec la condition suivante :

"Si un événement a le tag A (par exemple "Adulte" qui a l'URL "https://nom_du_site.fr/node/tag/tid/23031" ), masque-moi l'événement en question en lui ajoutant la classe "hidden""

Voici le code HTML (édulcoré) de l'agenda :

Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<div class="content-rdv">    
 
    <div class="node-item node-event clearfix" id="event-260381">
        <div class="media">
            <div class="col-xs-12 col-md-2">
                <div class="media-left">
                    <div class="event-actions">
 
                        <img src="https://nom_du_site.fr/data/nom_du_site.fr/application/node/260381/thumb.jpg" class="img-responsive bonne_vignette">
                    </div>
                    <a target="_blank" href="/mois-du-films-docs?tab=news#node-260381"></a>
                </div>
            </div>
            <div class="col-xs-12 col-md-10">
                <div class="media-body">
                    <h4><a target="_blank" href="/mois-du-films-docs?tab=news#node-260381">Histoire d’un regard </a></h4>
                    <p>Le Lundi 22 Novembre 2021 de 17h00 à 18h35 </p>
                    <div class="node-item-tags">
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/23031" style="background-color:#dabbe4 !important;color:#000000 !important;">Adulte </a>
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/23039">Projection </a>
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/28647" style="background-color:#12af27 !important;color:#ffffff !important;">Mois du film docs </a>
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/28932">À François Mitterrand - Auditorium </a>
                    </div>
                </div>
            </div>
            <div class="hidden-xs hidden-sm hidden-md hidden-lg">
                <div class="event-description">
                    <span class="event-description-close fas fa fa-times"></span>
                    <p>Histoire d’un regard de Mariana Otero (2020 ; 90 mn)</p>
                </div>
            </div>
        </div>
    </div>
    <div class="node-item node-event clearfix" id="event-260388">
        <div class="media">
            <div class="col-xs-12 col-md-2">
                <div class="media-left">
                    <div class="event-actions">
                        <img src="https://nom_du_site.fr/data/nom_du_site.fr/application/node/260388/thumb.jpg" class="img-responsive bonne_vignette">
                    </div>
                    <a target="_blank" href="/mois-du-films-docs?tab=news#node-260388"></a>
                </div>
            </div>
            <div class="col-xs-12 col-md-10">
                <div class="media-body">
                    <h4><a target="_blank" href="/mois-du-films-docs?tab=news#node-260388">Le Grand bal</a></h4>
                    <p>Le Mardi 23 Novembre 2021 de 17h00 à 18h30 </p>
                    <div class="node-item-tags">
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/23031" style="background-color:#dabbe4 !important;color:#000000 !important;">Adulte</a>
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/23039">Projection </a>
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/28647"style="background-color:#12af27 !important;color:#ffffff !important;">Mois du film docs </a>
                    </div>
                </div>
            </div>
            <div class="hidden-xs hidden-sm hidden-md hidden-lg">
                <div class="event-description">
                    <span class="event-description-close fas fa fa-times"></span>
                    <p>Le Grand bal de Laetitia Carton (2018 ; 86 min)</p>
                </div>
            </div>
        </div>
    </div>
    <div class="node-item node-event clearfix" id="event-260390">
        <div class="media">
            <div class="col-xs-12 col-md-2">
                <div class="media-left">
                    <div class="event-actions">
                        <img src="https://nom_du_site.fr/data/nom_du_site.fr/application/node/260390/thumb.jpg" class="img-responsive bonne_vignette">
                    </div>
                    <a target="_blank" href="/mois-du-films-docs?tab=news#node-260390"></a>
                </div>
            </div>
            <div class="col-xs-12 col-md-10">
                <div class="media-body">
                    <h4><a target="_blank" href="/mois-du-films-docs?tab=news#node-260390">Marche avec les loups</a>
                    </h4>
                    <p>Le Mercredi 24 Novembre 2021 de 17h00 à 18h30 </p>
                    <div class="node-item-tags">
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/23031" style="background-color:#dabbe4 !important;color:#000000 !important;">Jeunesse</a>
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/23039">Projection </a>
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/28647"style="background-color:#12af27 !important;color:#ffffff !important;">Mois du film docs </a>
                    </div>
                </div>
            </div>
            <div class="hidden-xs hidden-sm hidden-md hidden-lg">
                <div class="event-description">
                    <span class="event-description-close fas fa fa-times"></span>
                    <p><em>Marche avec les loups</em> de Jean-Michel Bertrand (2020 ; 88 mn)</p>
                </div>
            </div>
        </div>
    </div>
 
</div>

(Comme j'y connais pas grand-chose au jQuery/Javascript) Ma question est : comment SVP écrire ce script qui va :

1 - Rechercher si l'événement a un tag/lien avec la classe "badge" et (surtout) (par exemple) l'URL "https://nom_du_site.fr/node/tag/tid/23031"

2 - (si la condition est vraie) ajouter la classe "hidden" aux autres classes (class="node-item node-event clearfix") de l'événement en question ?


Merci par avance pour votre réponse et votre aide


Bonne journée

P.S : Précision importante : comme il s'agit d'une liste d'événements, cette liste est dynamique et les événements sont amenés à changer régulièrement.