Modifier background dans "p" enfant contenant "Merci"


#1

Bonjour,

Je souhaite modifier le background d’un enfant paragraphe “p” de ma class “et-pb-contact-message” contenant le mot “Merci” alors je fais:

jQuery(document).ready(function () {
    jQuery(".et-pb-contact-message").children("p:contains('Merci')").addClass('bg-alert-vert');
	});

Mais cela ne fonctionne pas. Je précise que j’ai remplacé les “$” par “jQuery” pour WordPress.

Je vous remercie de votre aide.


#2

Il semblerait que ça marche “tel quel” : https://jsfiddle.net/rcnk67vx/2/


#3

Bonjour barale61,

Si ton code est identique au jsfiddle proposé par @Julien_S mais que cela ne fonctionne toujours pas, il va nous falloir plus d’informations.

S’il y a un problème d’exécution, nous avons de bonne chance d’avoir une erreur dans la console JavaScript.

Pour l’ouvrir tu dois faire F12 ou trouver dans les options « Outils de développement » ou quelque chose comme cela en fonction de ton navigateur (sur Chrome c’est les «…» vertical > Plus d’outils > Outils de développemen). Puis utiliser l’onglet « Console ».

Il faut ensuite que tu nous copie/colle l’erreur pour que nous puissions t’aider (messages en rouge chez toi).

Ce que l’on peut tester ici c’est :

— L’inexistance de jQuery. Tu peux vérifier son existance en executant le code suivant :

console.log(jQuery);

qui doit retourner une fonction ƒ (e,t){return new we.fn.init(e,t)} dans ta console. Normalement le fait d’utiliser jQuery(document) si jQuery n’existe pas devrait te lever une erreur en premier lieu.

— L’inexistance du HTML au moment de l’exécution du code. Tu peux le vérifier en testant le code suivant juste avant ta fonction jQuery(".et-pb-contact-message")…` :

console.log(document.getElementsByClassName('et-pb-contact-message').length);

qui doit être différent de 0 pour prouver que ce n’est pas le problème. Cela compte la présence de ce tag au moment ou le code s’execute, s’il vaut 0, c’est que ton script est appelé avant que le HTML ne soit présent.

Nous attendons donc plus d’information pour t’aider plus !


#4

Bonjour,

Merci d’avoir répondu si vite.

Cela fonctionne bien sur d’autres éléments que j’ai ajoutés mais sur ce message d’erreur du formulaire de contact divi, cela ne fonctionne pas et ne me renvoie aucune erreur dans la console y compris de cette façon:

jQuery(document).ready(function () {
	console.log(document.getElementsByClassName('et-pb-contact-message').length);
	jQuery(".et-pb-contact-message").find('p:contains("Merci")').addClass('bg-alert-vert');
	console.log(document.getElementsByClassName('et-pb-contact-message').length);
});

et le console.log me renvoie 1


#5

Hello,
je viens juste pour une remarque bête mais : je vois que le travail est fait quand le document est “ready”. Donc une seule fois au changement de la page.
Je veux trouver le P qui contient Merci et je veux lui ajouter une classe.
Pour quoi faire ? Pour lui mettre une couleur verte ou quelque chose ?

En gros, il n’y a pas forcément besoin de JS, mais simplement de HTML ou de CSS.
J’imagine bien que si tu réponds comme cela, tu n’as peut-être pas la main sur l’HTML, mais ça serait top de toujours donner le contexte général de ta question, au lieu de juste le dernier point technique qui bloque.
Ça permet d’éviter le “problème X-Y” : https://fr.wikipedia.org/wiki/Problème_XY

Bon courage et bonne continuation !