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

Version imprimable

Bonjour à tous et à toutes,

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

Code:

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:

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

Code:

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:

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.

27/01/2023, 17h50
mathieu
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:

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

Bonjour,

Merci beaucoup Mathieu pour votre réponse :merci:
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:

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:

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 ;)

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:

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); });

28/01/2023, 12h26
spip93

Citation:

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 :mrgreen:
Merci beaucoup pour l'exemple :merci:
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 :ccool:

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

Bonne journée ;)

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

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

Bonne journée ;)

28/01/2023, 13h37
Toufik83

Bonjour,

Citation:

Envoyé par spip93

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

Oui, vous avez compris le code.

Citation:

Envoyé par spip93

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.

C'est juste un nom de variable, vous pouvez choisir le nom que vous voulez...

Citation:

Envoyé par spip93

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

Je ne comprends pas ! parce que le <button> d'inscription est déjà bien après le .node-item-tags de chaque élément, sauf les deux derniers...

Vous voulez ajouter le bouton dynamiquement aux éléments qui n'ont pas un bouton d'inscription ?

Mea culpa Toufik83 :boulet:, j'ai copié/collé le code HTML que vous voyez dans mon premier message APRÈS avoir appliqué un script qui déplace le bouton "Je m'inscris !" après les tags, mais avec ma méthode où je répète 30 fois mon script.
Bref... voici le "bon" code HTML, celui sans mon script pour déplacer le bouton "Je m'inscris !" :

Code:

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-">
            <button class="btn btn-primary btn-inscription btn-inscription-2117592701 float-right" data-id="2117592701" data-apiid="7496">Je m'inscris !</button>
            <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>
    </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>
            <button class="btn btn-primary btn-inscription btn-inscription-1184341588 float-right" data-id="1184341588" data-apiid="7502">Je m'inscris !</button>
            <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>
    </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>                
                <button class="btn btn-primary btn-inscription btn-inscription-1306354746 float-right" data-id="1306354746" data-apiid="7497">Je m'inscris !</button>
                <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>
    </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>
                <button class="btn btn-primary btn-inscription btn-inscription-691926364 float-right" data-id="691926364" data-apiid="7508">Je m'inscris !</button>
                <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>
    </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>

Comme vous le voyez, le bouton "Je m'inscris !" est un enfant de l'élément .node-item-content, juste avant la vignette de l'évènement (.node-item-thumb)

Donc, pour en revenir à ma question/problème précédent, quand j'exécute le script suivant :

Code:

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');
        });
});

... 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 ça fait ça SVP ?

D'avance merci pour votre réponse ;)

P.S : Vous l'aurez compris j'espère, je ne veux pas ajouter le bouton dynamiquement aux éléments qui n'ont pas un bouton d'inscription ; je veux juste le déplacer, quand il y en a un, après les tags.

Bonjour,

Citation:

Envoyé par spip93

... 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 ça fait ça SVP ?

C'est parce que vous avez 4 éléments .node-item-tagged qui ont un bouton à l'intérieur, et chaque élément contient un .node-item-tags, donc un total de 4 .node-item-tags, ce qui fait que le sélecteur .insertAfter('.node-item-tags') déplace/crée le bouton après chaque élément .node-item-tags rencontré, et donc 4 fois.

Sinon et avec le code HTML de votre dernière réponse, vous pouvez seulement modifier le code JS comme suite :
Code:

1 2 3 4 5 6 7 $('.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) .find('.btn-inscription').insertAfter($(this).find('.node-item-tags')); });
Il faudrait cibler seulement le .node-item-tags enfant de l'élément .node-item-tagged parcouru par each en utilisant le mot clé this.

29/01/2023, 12h23
spip93

Bonjour Toufik83,

Si je comprends bien, vous avez repris le script donné dans votre premier message et vous avez rajouté une ligne (en ligne 6)

Code:

.find('.btn-inscription').insertAfter($(this).find('.node-item-tags'));

qui dit :
"trouve l'élément qui a la classe '.btn-inscription' et place-le après... (dans l'élément this (qui est .node-item-tagged) trouve l'élément qui a la classe '.node-item-tags')"
autrement dit (et en français) :
"trouve l'élément qui a la classe '.btn-inscription' et place-le après l'élément qui a la classe '.node-item-tags' et qui est un enfant/descendant de l'élément this (qui est .node-item-tagged)"

Encore une fois, merci beaucoup pour votre réponse et vos explications :merci: :ccool:
Grâce à vous, j'ai appris des choses ;) :merci: :ccool:
J'espère pouvoir les mettre à profit maintenant

Bonne journée ;)