Mise à jour Tag Hn HTML via fonction Jquery

Comment modifier un Hn en span à l'aide d'une fonction Jquery

Exemple sur cette page
https://guideyourtrip.com/blog-voyag...-videos-guides

J'aimerais que les noms sous les images actuellement en H4 soit transformé en span
voir image-01 en pj

Une fonction Jquery qui ressemblerait à ça

Code:

---

1 2 3 4 5

<script> jQuery(document).ready(function($){ $('div.oceanie h2').replaceWith( "<span class='hp_image_destination'>" + $('div.oceanie h2').text() + "</span>"); }); </script>

---

a été implémenté sur la page d’accueil
https://guideyourtrip.com/
voir image-02 en pj

Dans ce as l'intitulé a été modifié de H2 en span
Je n'arrive pas à adapter cette solution à mon cas

Merci pour votre aide


Merci pour votre aide

Pièce jointe 622700Pièce jointe 622701

Bonjour,

Aucun élément n'a la classe .oceanie dans le premier lien, en inspectant la première image on voit :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

<div class="et_pb_column et_pb_column_1_2 et_pb_column_1 et_pb_css_mix_blend_mode_passthrough"> <div class="et_pb_with_border et_pb_module et_pb_team_member et_pb_team_member_0 et_clickable clearfix et_pb_text_align_left et_pb_bg_layout_light"> <div class="et_pb_team_member_image et-waypoint et_pb_animation_off et-animated"> <img width="1920" height="1080" src="https://guideyourtrip.com/wp-content/uploads/2022/07/Vignette_ITW_FAUL_PARIS_fr.jpg" alt="Michel Faul" srcset="...." class="wp-image-27897"> </div> <div class="et_pb_team_member_description"> <h4 class="et_pb_module_header">Michel Faul</h4> <div><p class="category_p">Guide conférencier à Paris</p></div> </div> </div> </div>

---

Donc pour remplacer le h4 à l'intérieur de .et_pb_team_member_description c'est :

Code:

---

1 2 3 4 5 6

$(".et_pb_team_member_description").each(function(){ //récupérer d'abord le texte du h4 let text=$(this).find('> h4').text(); //modification $(this).find('> h4').replaceWith("<span class='hp_image_destination'>" + text+ "</span>"); });

---

Bonjour,
tu peux peut-être le faire plus directement, par exemple :

Code:

---

1 2 3 4 5 6

$("h4.et_pb_module_header").each(function(){ //récupérer d'abord le texte du h4 let text=$(this).text(); //modification $(this).replaceWith("<span class='hp_image_destination'>" + text+ "</span>"); });

---

après la question est : pour quelle raison ce remplacement qui ne sert à rien ?

Bonjour

Vous avez peut-être fait une confusion

Code:

---

1 2 3 4 5 6

$(".et_pb_team_member_description").each(function(){ //récupérer d'abord le texte du h4 let text=$(this).find('> h4').text(); //modification $(this).find('> h4').replaceWith("<span class='hp_image_destination'>" + text+ "</span>"); });

---

ici class hp_image_destination est à remplacer par quoi ?

Citation:

---

Envoyé par NoSmoking

après la question est : pour quelle raison ce remplacement qui ne sert à rien ?

---

C'est pour ne pas passer d'un H2 à un H4

étant donné que vous utilisez wordpress, avez-vous essayé de faire cette modification dans le thème enfant ?
le code html que vous voulez modifier est généré par le cœur de wordpress ou par une extension ?

Citation:

---

Envoyé par Gilles_75

ici class hp_image_destination est à remplacer par quoi ?

---

c'est la classe css que vous avez indiquée dans votre 1er message.

Oui c'est le code qui fonctionne que j'essaye d'adapter pour une autre page
Il s'agit d'un module d'un Thème