Masquer un élément s'il contient tel(le) URL

**spip93** · 26/10/2021, 11h30

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.

**Toufik83** · 26/10/2021, 14h36

Bonjour,

Ce bout de code permet d'attribuer la class hidden aux <a> ayant la classe badge et un attribut href

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
document.querySelectorAll(".badge[href]")
.forEach((a) => {
    a.classList.add('hidden');
});

**spip93** · 26/10/2021, 14h49

Bonjour Toufik,

Merci pour la réponse

Cependant, je ne cherche pas à masquer le badge/tag. Ce que je cherche à masquer, c'est l(es)'événement(s) qui a(ont) pour badge/tag, par exemple, "Adulte" sachant que l'url du badge/tag "Adulte" a pour URL : https://nom_du_site.fr/node/tag/tid/23031
Dans mon exemple (dans le code HTML de l'agenda que j'ai donné), ça aurait pour résultat d'ajouter la classe "hidden" aux 2 premiers événements (sur les 3)

**Toufik83** · 26/10/2021, 15h24

Bonjour,

Je ne suis pas sûr d'avoir compris ce que tu veux dire par badge/tag, mais ce code permet de parcourir tous les événements et masque ceux qui ont un <a> ayant la classe badge et qui contient le texte Adulte :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
document.querySelectorAll(".badge[href]")
  .forEach((a) => {
    if (a.textContent.indexOf('Adulte') >= 0) {
      a.closest('.node-item').classList.add('hidden');
    }
  });