Cibler le parent du parent

Bonjour,

<ul id="liste">
<li>Premier niveau</li>
<li>Deuxième niveau
<ul>
<li>Deux-Un</li>
<li>Deux-Deux</li>
</ul>
</li>
</ul>

Au click sur Deux-Un ou Deux-Deux, je veux appliquer un script javascript.
Dans la réalité mon repère est id="liste", donc le parent du parent.

parentNode.id ne fonctionne pas.

J'ai essayé parentNode.parentNode.id mais cela ne fonctionne pas.

Est-il possible d'avoir "GrandParentNode.id"

J'espère que ma question est claire.

Hello,

<div id="toto">
  <ul id="liste">
    <li>Premier niveau</li>
    <li>Deuxième niveau</li>
  </ul>  
   <ul>
      <li>Deux-Un</li>
      <li>Deux-Deux</li>
   </ul>
</div>  

var li = document.querySelectorAll('li');

li.forEach(el => el.addEventListener('click', function(){
  var that = this;
  var parent = that.parentNode.parentNode.querySelector('#liste');
  
  console.log(parent)
}))

En gros, je remonte le DOM jusqu'au parent du parent et je traverse le DOM jusqu'à l'élément voulu. Il est possible de remonter le DOM et de traverser le DOM avec la méthode 'querySelector'
Modifié par allan00958 (05 Jul 2020 - 16:50)

Bonjour,

Merci de ta réponse.

Je vais essayer sur un codepen.

Je te tiens informé.

Bonjour,

Le codepen montre le contexte du problème.

Le problème se situe dans <ul id="menuhaut">.

Ton code ouvre bien le pop up mais il n'empêche pas l'exécution de l'URL, contrairement aux autres scripts de la page.

Par ailleurs s'il était possible de le restreindre à menuhaut ce serait mieux.
Modifié par boteha_2 (12 Jul 2020 - 12:26)

Re,

Je comprends pas vraiment ton problème mais je pense que la ligne e.preventDefault() doit se placer avant window.open

Bonjour allan00958,

Merci de ton suivi.

e.preventDefault() concerne le script pour id="trust" (qui fonctionne)

Ton sscipt plus bas concerne id="menuhaut".
Il faut ajouter preventDefault() dans ton script, je n'ai pas le temps de le faire maintenant, j'y reviens ce soir.

Bonjour allan00958,

Le problème était que ton script ouvrait bien le pop-up mais n'interdisait pas l'exécution du lien de secours pour les clients qui désactivent javascript.

Je ne sais pas s'il y a encore beaucoup mais je trouve prudent de leur offrir une alternative.

Dans le codepen j'ai juste ajouté à la fin :

e.preventDefault();

Non sans avoir ajouté "e" un peu plus haut :

el.addEventListener('click', function(e)

Et j'ai à présent l'effet voulu.

Une question :

var li = document.querySelectorAll('li');

Tu récupères tous les li de la page je suppose.

Ne peut-on pas se limiter juste aux li dans #menuhaut ?

Tu fais la sélection plus tard :

var parent = that.parentNode.parentNode.querySelector('#menuhaut');

Mais comme j'aurai un paquet de li dans la page en dehors de #menuhaut je me demande s'il ne faut pas limiter le balayage initial.
Modifié par boteha_2 (09 Jul 2020 - 19:34)

Re,

Oui, regarde la doc officielle:
https://developer.mozilla.org/fr/docs/Web/API/Document/querySelectorAll

L'avantage avec querySelector et querySelectorAll est que tu peux passer des sélecteurs css.

var li = document.querySelectorAll('#menuhaut li');

Très intéressant.

MERCI.

Je ne coche pas encore Résolu car peut-être d'autres questions pendant le week-end.

Je découvre un problème dans le codepen.

Je dois restreindre le script aux liens dont l'id existe.

j'ai essayé la condition :

if (this.id != '')

Mais sans succès.

Hello,
Alors je dirais que si tu cherches à tester un ID qui n’existe pas, ce ne serait pas égal à un string vide mais certainement undefined ou null.

A tester

Plusieurs possibilités:

if(!this.id){}

if(this.id === '')

if(this.id === undefined)

Je préfère la première qui teste l'existence de l'attribut id

Bonjour,

J'ai fait quelque changements dans le code, notamment car l'id à chercher est celle du lien (a) pas celle de l'élément de liste (li).

Cela semble marcher dans le codepen, le code commence à la ligne 66.

Il y a une ligne que je ne comprends pas :

 var that = this; 

Peux-tu expliquer en deux mots ?

Le mot clé 'this' fait référence à l'objet qui invoque la fonction dans laquelle 'this' est situé lexicalement. Ici, 'this' fait référence au lien sur lequel on clique. J'ai gardé une référence dans la variable 'that' mais en réfléchissant bien, ce n'est pas utile puisque la valeur de 'this' change à chaque fois qu'on clique sur un lien. Donc autant faire directement:

  var parent = this.parentNode.parentNode.querySelector('#menuhaut');

J'ai fait le changement.
Cela marche.

Autrement il y a 3 scripts dans le codepen.

Le premier cible les images dans #parent
Le deuxième les liens avec id dans #trust
Le troisième les liens avec id dans #menuhaut

Je vais essayer d'en ajouter un quatrième pour cibler les liens avec class dans #list.

Par ailleurs tous ces scripts ont pour but d'ouvrir un pop-up avec quelques variables.
Plutôt que de répéter à chaque fois à une sauce différente :

const win3=window.open(
				"nouscab.php#"+this.id,
				"", 
				"scrollbars=yes,resizable=yes,width=420,height=420"
			);	

Je vais essayer de créer une fonction.
Ce serait pour moi très facile en PHP mais en javascript je ne maîtrise pas la syntaxe comme vous voyez.

Je vous tiens informés.

Bonjour,

J'ai avancé.

le code avec le sélecteur de classe est à ligne 50 du codepen, cela correspond au lien origine en bas du code html.

Par contre je bute dans la création de ma fonction, dans une version primaire cela donne :

function pop_up (evt)
{
const win=window.open (
"nouscab.php#OR", "",
"scrollbars=yes,resizable=yes,width=420,height=420"
);

evt.preventDefault();
return win;
}  

mais si je remplace ce morceau de code par un appel à la fonction pop_up cela ne marche pas.

function ()
{
const win=window.open (
"nouscab.php#OR",
                "",
                "scrollbars=yes,resizable=yes,width=420,height=420"
            );

event.preventDefault();
}

/*
est remplacé par :
*/

pop_up (event)

Avez-vous une idée du problème, je tourne en rond.