11521 sujets

JavaScript, DOM et API Web HTML5

Petite fonction pour changer un parent selon l'enfant

Bonsoir, Voila je voudrais faire une petite fonction Js pour ajouter une classe à parent selon si sont enfant a ou non une certaine classe.

<p class="ContRowBorderLeftp"><span class="spanss"><?php the_field( 'editeur_n_1reallight' ); ?></p>

Voila je voudrai que si ma span a une certaine classe le p obtienne une autre classe.
Voila ma tentative celle ci ne fonctionne pas je n'ai même pas le "failed"

document.querySelectorAll(".spanss").forEach(function (lined) {
  if (lined.innerHTML.match(/^\s*$/)) {
  lined.classList.add("Dnone");
  }
 })
 document.querySelectorAll(".spanss").forEach(function (deswpanspan) {
  if (deswpanspan.innerHTML.classList.contains("Dnone")) {
    deswpanspan.parentElement.classlist.add("Dnone");
  }
else {
 deswpanspan.classList.add("failed");
}/* le else et juste la pour le test  */
 })

Si quelq'un à une idée de pourquoi cela ne marche pas, je suis en plein brouillard là.
Merci d'avance et bonne soirée
Modérateur
Salut,

Avant de commencer, tu ne fermes pas le span dans le html.
Tu peux aussi mutualiser ton querySelectorAll en passant pas une variable.
Et enfin mettre un failed également sur ton premier if. Comme j'ai viré le contenu du span il fail donc chez moi ca bloque au .match. Quest-ce que tu essaie de vérifier avec le match ?

var spanss = document.querySelectorAll(".spanss");

spanss.forEach(function(lined) {
  if (lined.innerHTML.match(/^\s*$/)) {
  	lined.classList.add("Dnone");
  } else {
   	lined.classList.add("failed");
  }
});

spanss.forEach(function (deswpanspan) {
  if (deswpanspan.innerHTML.classList.contains("Dnone")) {
    deswpanspan.parentElement.classlist.add("Dnone");
  } else {
    deswpanspan.classList.add("failed");
  }
})


https://jsfiddle.net/undless/sxd3fovh/
Bonjour,
Merci pour la réponse Laurent.
enfaite je veux que si la span contiens la class Dnone sont parent soit le <p> obtienne lui aussi la classe Dnone.
La classe Dnone sert à mettre Display=none;
j'ai tester ton code et je ne sais pas pourquoi mais le <p> n’obtiens pas la classe Dnone.
Modérateur
Bonjour,

C'était presque ça.

1) il manque un </span> dans le html

2) deswpanspan.innerHTML est une chaine de caractère. Du coup, deswpanspan.innerHTML.classList ne marche pas. D'ailleurs, ça produit une erreur dans la console. Je pense que c'est essentiellement ça qui empêchait le code initial de fonctionner.

Edit: il y a une autre erreur, c'est "classList" avec un "L" majuscule et non pas "classlist"

3) je préfère utiliser la propriété parentNode plutôt que parentElement, mais ici les deux devraient marcher.

4) pourquoi faire deux .forEach() ?

Une possibilité :

document.querySelectorAll(".spanss").forEach(function(lined) {
  if (lined.innerHTML.match(/^\s*$/)) {
  	lined.classList.add("Dnone");
  	lined.parentNode.classList.add("Dnone");
  }
});

Amicalement,
Modifié par parsimonhi (28 Jan 2021 - 13:57)
Sujet clos
Aller à