Extraire un nombre d'un ID d'un élément HTML pour l'utiliser dans un lien

**spip93** · 27/01/2023, 17h19

Bonjour à tous et à toutes,

Sur un des sites sur lequel je travaille, j'ai une liste d'éléments/évènements :

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
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 :

Code :

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

var id = document.getElementsByClassName('.node-list.node-list-news>div:nth-child(1)');

ou

Code :

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

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 :

Code :

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

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.

**mathieu** · 27/01/2023, 17h50

vous êtes sûr de ne pas pouvoir faire ces modifications directement à la génération du code html ?

en ce qui concerne l'utilisation de "getElementsByClassName" vous devez indiquer des classes css en argument mais là vous avez mis un sélecteur css
https://developer.mozilla.org/fr/doc...ntsByClassName

donc vous devez plutot essayer cela et ensuite faire une boucle pour lire le résultat

Code javascript :

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

1
2
3
let elements = document
.getElementsByClassName("node-list node-list-news")
.getElementsByTagName("div");

**spip93** · 27/01/2023, 23h37

Bonjour,

Merci beaucoup Mathieu pour votre réponse

Le problème c'est que ça me met l'erreur suivante quand je le copie/colle dans la console :
Uncaught TypeError: document.getElementsByClassName(...).getElementsByTagName is not a function

J'ai donc cherché et fini par trouver une autre solution :

Code :

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

1
2
3
var idEvent = $('.node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(1)').attr("id").match(/\d+$/);
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(1) h3" ).wrap( "<a href='/node/content/nid/"+idEvent+"'></a>" );
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(1) .node-item-content.node-item-content-" ).wrap( "<a href='/node/content/nid/"+idEvent+"'></a>" );

Cependant, comment faire propre et court, sachant que j'aurai, au maximum 30-40 évènements ?
Comment faire plus propre que ça ?

Code :

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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
var idEvent1 = $('.node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(1)').attr("id").match(/\d+$/);
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(1) h3" ).wrap( "<a href='/node/content/nid/"+idEvent1+"'></a>" );
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(1) .node-item-content.node-item-content-" ).wrap( "<a href='/node/content/nid/"+idEvent1+"'></a>" );
 
var idEvent2 = $('.node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(2)').attr("id").match(/\d+$/);
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(2) h3" ).wrap( "<a href='/node/content/nid/"+idEvent2+"'></a>" );
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(2) .node-item-content.node-item-content-" ).wrap( "<a href='/node/content/nid/"+idEvent2+"'></a>" );
 
var idEvent3 = $('.node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(3)').attr("id").match(/\d+$/);
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(3) h3" ).wrap( "<a href='/node/content/nid/"+idEvent3+"'></a>" );
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(3) .node-item-content.node-item-content-" ).wrap( "<a href='/node/content/nid/"+idEvent3+"'></a>" );
 
var idEvent4 = $('.node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(4)').attr("id").match(/\d+$/);
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(4) h3" ).wrap( "<a href='/node/content/nid/"+idEvent4+"'></a>" );
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(4) .node-item-content.node-item-content-" ).wrap( "<a href='/node/content/nid/"+idEvent4+"'></a>" );
 
var idEvent5 = $('.node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(5)').attr("id").match(/\d+$/);
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(5) h3" ).wrap( "<a href='/node/content/nid/"+idEvent5+"'></a>" );
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(5) .node-item-content.node-item-content-" ).wrap( "<a href='/node/content/nid/"+idEvent5+"'></a>" );
 
var idEvent6 = $('.node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(6)').attr("id").match(/\d+$/);
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(6) h3" ).wrap( "<a href='/node/content/nid/"+idEvent6+"'></a>" );
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(6) .node-item-content.node-item-content-" ).wrap( "<a href='/node/content/nid/"+idEvent6+"'></a>" );
 
var idEvent7 = $('.node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(7)').attr("id").match(/\d+$/);
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(7) h3" ).wrap( "<a href='/node/content/nid/"+idEvent7+"'></a>" );
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(7) .node-item-content.node-item-content-" ).wrap( "<a href='/node/content/nid/"+idEvent7+"'></a>" );
 
var idEvent8 = $('.node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(8)').attr("id").match(/\d+$/);
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(8) h3" ).wrap( "<a href='/node/content/nid/"+idEvent8+"'></a>" );
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(8) .node-item-content.node-item-content-" ).wrap( "<a href='/node/content/nid/"+idEvent8+"'></a>" );
 
var idEvent9 = $('.node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(9)').attr("id").match(/\d+$/);
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(9) h3" ).wrap( "<a href='/node/content/nid/"+idEvent9+"'></a>" );
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(9) .node-item-content.node-item-content-" ).wrap( "<a href='/node/content/nid/"+idEvent9+"'></a>" );
 
var idEvent10 = $('.node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(10)').attr("id").match(/\d+$/);
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(10) h3" ).wrap( "<a href='/node/content/nid/"+idEvent10+"'></a>" );
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(10) .node-item-content.node-item-content-" ).wrap( "<a href='/node/content/nid/"+idEvent10+"'></a>" );
 
var idEvent11 = $('.node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(11)').attr("id").match(/\d+$/);
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(11) h3" ).wrap( "<a href='/node/content/nid/"+idEvent11+"'></a>" );
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(11) .node-item-content.node-item-content-" ).wrap( "<a href='/node/content/nid/"+idEvent11+"'></a>" );
 
var idEvent12 = $('.node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(12)').attr("id").match(/\d+$/);
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(12) h3" ).wrap( "<a href='/node/content/nid/"+idEvent12+"'></a>" );
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(12) .node-item-content.node-item-content-" ).wrap( "<a href='/node/content/nid/"+idEvent12+"'></a>" );
 
var idEvent13 = $('.node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(13)').attr("id").match(/\d+$/);
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(13) h3" ).wrap( "<a href='/node/content/nid/"+idEvent13+"'></a>" );
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(13) .node-item-content.node-item-content-" ).wrap( "<a href='/node/content/nid/"+idEvent13+"'></a>" );
 
var idEvent14 = $('.node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(14)').attr("id").match(/\d+$/);
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(14) h3" ).wrap( "<a href='/node/content/nid/"+idEvent14+"'></a>" );
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(14) .node-item-content.node-item-content-" ).wrap( "<a href='/node/content/nid/"+idEvent14+"'></a>" );
 
var idEvent15 = $('.node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(15)').attr("id").match(/\d+$/);
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(15) h3" ).wrap( "<a href='/node/content/nid/"+idEvent15+"'></a>" );
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(15) .node-item-content.node-item-content-" ).wrap( "<a href='/node/content/nid/"+idEvent15+"'></a>" );
 
var idEvent16 = $('.node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(16)').attr("id").match(/\d+$/);
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(16) h3" ).wrap( "<a href='/node/content/nid/"+idEvent16+"'></a>" );
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(16) .node-item-content.node-item-content-" ).wrap( "<a href='/node/content/nid/"+idEvent16+"'></a>" );
 
var idEvent17 = $('.node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(17)').attr("id").match(/\d+$/);
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(17) h3" ).wrap( "<a href='/node/content/nid/"+idEvent17+"'></a>" );
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(17) .node-item-content.node-item-content-" ).wrap( "<a href='/node/content/nid/"+idEvent17+"'></a>" );
 
var idEvent18 = $('.node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(18)').attr("id").match(/\d+$/);
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(18) h3" ).wrap( "<a href='/node/content/nid/"+idEvent18+"'></a>" );
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(18) .node-item-content.node-item-content-" ).wrap( "<a href='/node/content/nid/"+idEvent18+"'></a>" );
 
var idEvent19 = $('.node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(19)').attr("id").match(/\d+$/);
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(19) h3" ).wrap( "<a href='/node/content/nid/"+idEvent19+"'></a>" );
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(19) .node-item-content.node-item-content-" ).wrap( "<a href='/node/content/nid/"+idEvent19+"'></a>" );
 
var idEvent20 = $('.node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(20)').attr("id").match(/\d+$/);
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(20) h3" ).wrap( "<a href='/node/content/nid/"+idEvent20+"'></a>" );
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(20) .node-item-content.node-item-content-" ).wrap( "<a href='/node/content/nid/"+idEvent20+"'></a>" );
 
var idEvent21 = $('.node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(21)').attr("id").match(/\d+$/);
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(21) h3" ).wrap( "<a href='/node/content/nid/"+idEvent21+"'></a>" );
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(21) .node-item-content.node-item-content-" ).wrap( "<a href='/node/content/nid/"+idEvent21+"'></a>" );
 
var idEvent22 = $('.node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(22)').attr("id").match(/\d+$/);
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(22) h3" ).wrap( "<a href='/node/content/nid/"+idEvent22+"'></a>" );
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(22) .node-item-content.node-item-content-" ).wrap( "<a href='/node/content/nid/"+idEvent22+"'></a>" );
 
var idEvent23 = $('.node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(23)').attr("id").match(/\d+$/);
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(23) h3" ).wrap( "<a href='/node/content/nid/"+idEvent23+"'></a>" );
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(23) .node-item-content.node-item-content-" ).wrap( "<a href='/node/content/nid/"+idEvent23+"'></a>" );
 
var idEvent24 = $('.node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(24)').attr("id").match(/\d+$/);
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(24) h3" ).wrap( "<a href='/node/content/nid/"+idEvent24+"'></a>" );
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(24) .node-item-content.node-item-content-" ).wrap( "<a href='/node/content/nid/"+idEvent24+"'></a>" );
 
var idEvent25 = $('.node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(25)').attr("id").match(/\d+$/);
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(25) h3" ).wrap( "<a href='/node/content/nid/"+idEvent25+"'></a>" );
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(25) .node-item-content.node-item-content-" ).wrap( "<a href='/node/content/nid/"+idEvent25+"'></a>" );
 
var idEvent26 = $('.node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(26)').attr("id").match(/\d+$/);
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(26) h3" ).wrap( "<a href='/node/content/nid/"+idEvent26+"'></a>" );
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(26) .node-item-content.node-item-content-" ).wrap( "<a href='/node/content/nid/"+idEvent26+"'></a>" );
 
var idEvent27 = $('.node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(27)').attr("id").match(/\d+$/);
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(27) h3" ).wrap( "<a href='/node/content/nid/"+idEvent27+"'></a>" );
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(27) .node-item-content.node-item-content-" ).wrap( "<a href='/node/content/nid/"+idEvent27+"'></a>" );
 
var idEvent28 = $('.node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(28)').attr("id").match(/\d+$/);
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(28) h3" ).wrap( "<a href='/node/content/nid/"+idEvent28+"'></a>" );
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(28) .node-item-content.node-item-content-" ).wrap( "<a href='/node/content/nid/"+idEvent28+"'></a>" );
 
var idEvent29 = $('.node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(29)').attr("id").match(/\d+$/);
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(29) h3" ).wrap( "<a href='/node/content/nid/"+idEvent29+"'></a>" );
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(29) .node-item-content.node-item-content-" ).wrap( "<a href='/node/content/nid/"+idEvent29+"'></a>" );
 
var idEvent30 = $('.node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(30)').attr("id").match(/\d+$/);
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(30) h3" ).wrap( "<a href='/node/content/nid/"+idEvent30+"'></a>" );
$( ".node-list.node-list-news .dp-node.dp-node-news.clearfix.node-item.node-news.node-item-tagged:nth-child(30) .node-item-content.node-item-content-" ).wrap( "<a href='/node/content/nid/"+idEvent30+"'></a>" );

Ça fonctionne, mais ça n'est pas propre vous en conviendrez.

Merci par avance pour votre réponse

Bonne journée

**Toufik83** · 28/01/2023, 03h47

Bonjour,

Pourquoi ne pas utiliser une boucle au lieu de créez 30 variables à la main ?

Vous pouvez parcourir les éléments .node-item-tagged avec $.each comme ça :

Code :

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

1
2
3
4
5
6
$('.node-item-tagged')
.each(function() {
    let idEvent = $(this).attr('id').match(/\d+$/gi),
      wrapper = "<a href='/node/content/nid/" + idEvent + "'></a>";
    $(this).find('> h3 , > .node-item-content').wrap(wrapper);
});

**spip93** · 28/01/2023, 12h26

Envoyé par Toufik83

Pourquoi ne pas utiliser une boucle au lieu de créez 30 variables à la main ?

Tout simplement parce que je ne savais pas faire

Merci beaucoup pour l'exemple

Je vais m'en inspirer pour le futur, car ça m'arrive souvent d'avoir à reproduire un code pour plusieurs mêmes éléments.
Ça va me faire gagner du temps et surtout ça va s'adapter quel que soit le nombre d'éléments

Donc, que je comprenne bien (pour pouvoir le refaire), ligne par ligne votre code signifie (désolé si ça n'est pas très français) :
- "Sur les éléments (1) qui ont comme sélecteur CSS .node-item-tagged ..."
- "... applique sur chacun de ces éléments (1) la fonction suivante : "
- "... mets dans la variable qui s'appelle idEvent le résultat de l'opération suivante :" "... sur cet élément (1), récupère l'attribut ID et extrais le numéro"
- "L'enveloppe est constituée ... " "...d'un lien (a) avec une URL commençant par /node/content/nid/ et se terminant par la variable idEvent (c'est à dire le numéro extrait précédemment)"
- "Dans la descendance de l’élément (1), trouve l'élément h3, ET l'élément qui a le sélecteur .node-item-content et enveloppe-les avec l'enveloppe définie précédemment"
- Fin

C'est bien ça, ou je me trompe quelque part ?

Question : "wrapper" doit s'appeler comme ça ou est-ce que je pourrais l'appeler autrement (ex : enveloppe) ? C'est juste une question que je me posais sans que j'aie l'intention de le faire.

Merci pour votre réponse

Bonne journée

**spip93** · 28/01/2023, 12h53

Toufik83, j'ai repris votre code en exemple pour (dé)placer le bouton "Je m'inscris !" après les tags :

Code :

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

1
2
3
4
5
6
$(document).ready(function(){
        $('.node-item-tagged')
        .each(function() {
            $(this).find('> .node-item-content > .btn-inscription').insertAfter('.node-item-tags');
        });
});

Problème : au bas de chaque évènement, j'ai 4 boutons "Je m'inscris !" (soit autant de fois qu'on a un évènement avec un tel bouton)

Savez-vous pourquoi j'ai ce problème et pourquoi j'ai des boutons "Je m'inscris !", y compris sur les (2) évènements qui n'ont pas de boutons "Je m'inscris !" ?

Merci par avance pour votre aide

Bonne journée

Extraire un nombre d'un ID d'un élément HTML pour l'utiliser dans un lien

jQuery

Vue hybride

Discussions similaires

Partager

Partager