Bonjour à tous et à toutes,
Sur un des sites sur lequel je travaille, j'ai une liste d'éléments/évènements :
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
| <div class="node-list node-list-news">
<div id="node-337368" class="dp-node dp-node-news dp-node-337368 clearfix node-item node-news node-item-tagged" data-item-tags="Petite enfance 0-3 ans,Conte,Jeunesse">
<h3>Titre de l'évènement</h3>
<div id="2117592701" class="node-item-content node-item-content-">
<div class="node-item-thumb">
<img class="img-responsive center-block" height="355" src="https://via.placeholder.com/631x355" width="631.117" />
</div>
<div class="node-item-teaser">
<p>Description courte de l'évènement</p>
</div>
</div>
<div class="node-item-tags">
<a class="badge" href="https://nom-du-portail.fr/node/tag/tid/15180">Lieu de l'évènement</a><a class="badge" href="https://nom-du-portail.fr/node/tag/tid/14806"> Petite enfance 0-3 ans </a>
<a class="badge" href="https://nom-du-portail.fr/node/tag/tid/15469"> Conte </a><a class="badge" href="https://nom-du-portail.fr/node/tag/tid/15498"> Jeunesse </a>
</div>
<button class="btn btn-primary btn-inscription btn-inscription-2117592701 float-right" data-id="2117592701" data-apiid="7496">Je m'inscris !</button>
</div>
<div id="node-337383" class="dp-node dp-node-news dp-node-337383 clearfix node-item node-news node-item-tagged" data-item-tags="A partir de 4 ans,Conte,Jeunesse">
<h3>Rendez-vous Conte</h3>
<div id="1184341588" class="node-item-content node-item-content-">
<div class="evenement-item-created node-item-created">Le Mercredi 08 Février 2023 de 10h30 à 11h30</div>
<div class="node-item-thumb">
<img class="img-responsive center-block" height="355" src="https://via.placeholder.com/631x355" width="631.117" />
</div>
<div class="node-item-teaser">
<p>Description courte de l'évènement</p>
</div>
</div>
<div class="node-item-tags">
<a class="badge" href="https://nom-du-portail.fr/node/tag/tid/15180">Lieu de l'évènement</a> <a class="badge" href="https://nom-du-portail.fr/node/tag/tid/22897"> A partir de 4 ans </a>
<a class="badge" href="https://nom-du-portail.fr/node/tag/tid/15469"> Conte </a> <a class="badge" href="https://nom-du-portail.fr/node/tag/tid/15498"> Jeunesse </a>
</div>
<button class="btn btn-primary btn-inscription btn-inscription-1184341588 float-right" data-id="1184341588" data-apiid="7502">Je m'inscris !</button>
</div>
<div id="node-337375" class="dp-node dp-node-news dp-node-337375 clearfix node-item node-news node-item-tagged" data-item-tags="Petite enfance 0-3 ans,Conte,Jeunesse">
<h3>Rendez-vous Conte</h3>
<div id="1306354746" class="node-item-content node-item-content-">
<div class="evenement-item-created node-item-created">Le Mercredi 01 Mars 2023 de 10h30 à 11h30</div>
<div class="node-item-thumb">
<img class="img-responsive center-block" height="355" src="https://via.placeholder.com/631x355" width="631.117" />
</div>
<div class="node-item-teaser">
<p>Description courte de l'évènement</p>
</div>
</div>
<div class="node-item-tags">
<a class="badge" href="https://nom-du-portail.fr/node/tag/tid/15180">Lieu de l'évènement</a> <a class="badge" href="https://nom-du-portail.fr/node/tag/tid/14806"> Petite enfance 0-3 ans </a>
<a class="badge" href="https://nom-du-portail.fr/node/tag/tid/15469"> Conte </a> <a class="badge" href="https://nom-du-portail.fr/node/tag/tid/15498"> Jeunesse </a>
</div>
<button class="btn btn-primary btn-inscription btn-inscription-1306354746 float-right" data-id="1306354746" data-apiid="7497">Je m'inscris !</button>
</div>
<div id="node-337577" class="dp-node dp-node-news dp-node-337577 clearfix node-item node-news node-item-tagged" data-item-tags="A partir de 4 ans,Conte,Jeunesse">
<h3>Rendez-vous Conte</h3>
<div id="691926364" class="node-item-content node-item-content-">
<div class="evenement-item-created node-item-created">Le Mercredi 08 Mars 2023 de 10h30 à 11h30</div>
<div class="node-item-thumb">
<img class="img-responsive center-block" height="355" src="https://via.placeholder.com/631x355" width="631.117" />
</div>
<div class="node-item-teaser">
<p>Description courte de l'évènement</p>
</div>
</div>
<div class="node-item-tags">
<a class="badge" href="https://nom-du-portail.fr/node/tag/tid/15180">Lieu de l'évènement</a> <a class="badge" href="https://nom-du-portail.fr/node/tag/tid/22897"> A partir de 4 ans </a>
<a class="badge" href="https://nom-du-portail.fr/node/tag/tid/15469"> Conte </a> <a class="badge" href="https://nom-du-portail.fr/node/tag/tid/15498"> Jeunesse </a>
</div>
<button class="btn btn-primary btn-inscription btn-inscription-691926364 float-right" data-id="691926364" data-apiid="7508">Je m'inscris !</button>
</div>
<div id="node-344735" class="dp-node dp-node-news dp-node-344735 clearfix node-item node-news node-item-tagged" data-item-tags="Petite enfance 0-3 ans,Animation jeunesse,Spectacles">
<h3>Spectacle de marionnettes avec la Cie du Funambule</h3>
<div id="1902485032" class="node-item-content node-item-content-">
<div class="evenement-item-created node-item-created">Le Jeudi 09 Mars 2023 de 10h15 à 11h30</div>
<div class="node-item-thumb">
<img class="img-responsive center-block" height="355" src="https://via.placeholder.com/631x355" width="631.117" />
</div>
<div class="node-item-teaser">
<p>Description courte de l'évènement</p>
</div>
</div>
<div class="node-item-tags">
<a class="badge" href="https://nom-du-portail.fr/node/tag/tid/15182">Lieux de l'évènement</a> <a class="badge" href="https://nom-du-portail.fr/node/tag/tid/14806"> Petite enfance 0-3 ans </a>
<a class="badge" href="https://nom-du-portail.fr/node/tag/tid/15503"> Animation jeunesse </a> <a class="badge" href="https://nom-du-portail.fr/node/tag/tid/15496"> Spectacles </a>
</div>
</div>
<div id="node-344745" class="dp-node dp-node-news dp-node-344745 clearfix node-item node-news node-item-tagged" data-item-tags="A partir de 3 ans,Animation jeunesse">
<h3>Spectacle de contes "Monsieur Trombone au pays des sons"</h3>
<div id="35269925" class="node-item-content node-item-content-">
<div class="evenement-item-created node-item-created">Le Mercredi 05 Avril 2023 de 14h30 à 15h30</div>
<div class="node-item-thumb">
<img class="img-responsive center-block" height="355" src="https://via.placeholder.com/631x355" width="631.117" />
</div>
<div class="node-item-teaser">
<p>Description courte de l'évènement</p>
</div>
</div>
<div class="node-item-tags">
<a class="badge" href="https://nom-du-portail.fr/node/tag/tid/15182">Lieux de l'évènement</a> <a class="badge" href="https://nom-du-portail.fr/node/tag/tid/14807"> A partir de 3 ans </a>
<a class="badge" href="https://nom-du-portail.fr/node/tag/tid/15503"> Animation jeunesse </a>
</div>
</div>
</div> |
Et ce que je souhaiterai faire en Javascript, c'est ceci :
- Extraire le numéro de chaque évènement qui est contenu dans son ID. Par exemple, en ligne 3, le premier évènement a id="node-337368" et je voudrais extraire le numéro (soit : 337368)
- Envelopper le titre H3 ET la vignette (class="node-item-thumb") de chaque évènement avec un lien a qui a un href construit de la sorte : /node/content/nid/xxxxxx où xxxxxx est le numéro extrait de l'ID. Je pense pouvoir faire cette partie là, mais je doute que ce soit très propre.
Le problème c'est que je ne connais à l'avance :
- Ni le numéro/l'ID de chaque évènement
- Ni le nombre d'évènements (entre 0 et 30 évènements)
Je débute à peine en Javascript, d'où mon appel à l'aide.
Avant d'écrire ce message, pour extraire le numéro de chaque évènement, j'ai d'abord essayé de récupérer l'ID du premier évènement avec le code suivant :
var id = document.getElementsByClassName('.node-list.node-list-news>div:nth-child(1)');
ou
var id= document.getElementById('.node-list.node-list-news>div:nth-child(1)');
Puisque que l'élément que je pointe a des classes ET un ID, mais bien que .node-list.node-list-news>div:nth-child(1) pointe bien vers mon premier évènement en revanche, quand j'entre cette ligne de code dans la console, ça me renvoie undefined et console.log(element) renvoie null
Pareil, pour extraire le numéro de l'ID de mon élément, je compte faire ceci :
var number = parseInt(id, 10);
mais, là encore, dans la console, même si je déclare ma variable id AVANT d'en extraire le numéro, ça me renvoie undefined
Sauriez-vous SVP comment faire ?
Et surtout, car j'aimerai apprendre et pas recopier bêtement, pouvez-vous m'expliquer pas à pas votre code et pourquoi mon code ne fonctionne pas ?
Merci par avance
Bonne journée
P.S : J'ai cherché sur Internet comment récupérer l'ID d'un élément, mais à chaque fois, ça expliquait comment faire sur un élément sur lequel on a cliqué, or là, personne ne clique sur l'évènement.
Extraire un nombre d'un ID d'un élément HTML pour l'utiliser dans un lien
Répondre avec citation
Partager