Discussion :

[Gilles_75]

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 :

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

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

[Toufik83]

Bonjour,

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

Code html :

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

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 :

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

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

[NoSmoking]

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

Code :

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

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 ?

[Gilles_75]

Bonjour

Vous avez peut-être fait une confusion

Code :

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

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 ?

[mathieu]

é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 ?

ici class hp_image_destination est à remplacer par quoi ?

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

[Gilles_75]

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

[Gilles_75]

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