IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Mise à jour Tag Hn HTML via fonction Jquery


Sujet :

jQuery

  1. #1
    Membre du Club
    Homme Profil pro
    Consultant en Business Intelligence
    Inscrit en
    mars 2017
    Messages
    137
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Consultant en Business Intelligence

    Informations forums :
    Inscription : mars 2017
    Messages : 137
    Points : 51
    Points
    51
    Par défaut 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 : 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

    Nom : image-01.jpg
Affichages : 60
Taille : 146,2 KoNom : image-02.jpg
Affichages : 67
Taille : 155,8 Ko

  2. #2
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    2 086
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 2 086
    Points : 4 038
    Points
    4 038
    Par défaut
    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>");
    });

  3. #3
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    16 130
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 16 130
    Points : 41 062
    Points
    41 062
    Par défaut
    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 ?

  4. #4
    Membre du Club
    Homme Profil pro
    Consultant en Business Intelligence
    Inscrit en
    mars 2017
    Messages
    137
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Consultant en Business Intelligence

    Informations forums :
    Inscription : mars 2017
    Messages : 137
    Points : 51
    Points
    51
    Par défaut
    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 ?

  5. #5
    Membre du Club
    Homme Profil pro
    Consultant en Business Intelligence
    Inscrit en
    mars 2017
    Messages
    137
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Consultant en Business Intelligence

    Informations forums :
    Inscription : mars 2017
    Messages : 137
    Points : 51
    Points
    51
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    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

  6. #6
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    9 191
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 9 191
    Points : 14 099
    Points
    14 099
    Par défaut
    é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 Voir le message
    ici class hp_image_destination est à remplacer par quoi ?
    c'est la classe css que vous avez indiquée dans votre 1er message.

  7. #7
    Membre du Club
    Homme Profil pro
    Consultant en Business Intelligence
    Inscrit en
    mars 2017
    Messages
    137
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Consultant en Business Intelligence

    Informations forums :
    Inscription : mars 2017
    Messages : 137
    Points : 51
    Points
    51
    Par défaut
    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

Discussions similaires

  1. [C# 2.0] Mise à jour d'un DataGridView via le binding
    Par oodini dans le forum Windows Forms
    Réponses: 5
    Dernier message: 01/07/2006, 22h08
  2. Mise à jour d'une controle via une classe.
    Par Andry dans le forum Delphi
    Réponses: 4
    Dernier message: 23/06/2006, 15h00
  3. Réponses: 3
    Dernier message: 02/01/2006, 11h53
  4. Réponses: 3
    Dernier message: 15/11/2005, 18h50
  5. [Debutant(e)]mise à jour de mon formulaire via JSP
    Par kouadjalain dans le forum Servlets/JSP
    Réponses: 4
    Dernier message: 11/08/2004, 15h43

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo