remonter dans le DOM

Par Defy, il y a 10 ans

Javascript

salut les gens, j'ai une petite question, je seche un peut sur la manipulation du DOM dans differents niveau de noeud. Je m'explique

<div class="adigit-panel"> <header class="adigit-panel-header panel-warning"> <div class="adigit-icon"><i class="fa fa-plus fa-2x"></i></div> <div class="title-adigit-panel"> un titre du panneau warning </div> </header> <section class="adigit-panel-content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dignissimos ea, eum eveniet, fugit laboriosam libero maxime nostrum provident quis rem sint suscipit temporibus. Delectus itaque libero molestias repellendus tempora. </section> </div>

j'ai 4 panel tous clicable sur une icone (fa-plus ) qui une fois clické doivent impacter une element de leur container principal mais qui d'un noeud plus haut dans le DOM (adigit-panel-content ) et j'ai pas la moindre idée de comment faire

j'ai tester des combinaison de boucle pour recupéré le content lié au panel clické mais j'ai juste reussi a masqué tous les contents du coup ca ne vas pas

5 réponses

Julienng, il y a 10 ans

Dans ce cas la tu peux faire:

var element = document.getElementById("child1") // peut importe la méthode avec laquelle tu le récupère var parent2 = element.parentNode.parentNode;
Julienng, il y a 10 ans

Salut,
pour manipuler le dom :

// commence par un # pour un id, un . pour une class document.querySelector(".adigit-panel-content") // sélectionne un élement avec la class adigit-panel-content document.querySelectorAll(".adigit-panel-content") // sélection tous les élements avec la class adigit-panel-content
Huggy, il y a 10 ans

Bonjour Defy,
Je vois 2 approches, la première consiste à attacher l'event click au niveau le plus haut adigit-panel avec filtrage du faplus (voir la video de Graph sur on click)
le currentTarget te donnera l'objet parent et target l'objet cliqué.
la deuxième approche c'est d'utiliser jquery et la propriété parents qui retourne la liste des parents de l'objet cliqué. en filtrant sur la bonne classe et en prenant le premier get(0), tu auras le panel parent.

Defy, il y a 10 ans

@Julienng je parle pas de la recupération des elements, ca je sais faire, c'est pas le soucie, c'est de pouvoir remonter de 2 crans dans le dom pour chopper le parents lors du click sur le fa-plus quime pose soucie.

@Huggy j'essaie le plus possible de me detacher de jquery quand j'en est pas besoin, surtous que pour juste une approche particuliere j'ai pas envie de me prendre la tete avec jQuery.

Defy, il y a 10 ans

Bon ben en reflechisasnt un peut et grâce a votre aide j'ai réussi a faire ce quelle voulais

j'ai recupéré le container principal, je defini une valeur a trouver pour le e.target si il vaut true alors je recupère l'element enfant qui m'interesse pour le traiter derriere.

du coup j'ai utilisé underscore pour le parsing de tableau ( plus facile ^^ )

je poste le code ma solution du coup, si ca peut aider quelqu'un d'autre ou que quelqu'un a une proposition pour optimiser tous ca, je suis preneur

Adigit.panel.prototype.collapse = function () { var div = document.querySelectorAll('.adigit-panel'); _.each(div, function (d) { d.addEventListener('click', function (e) { var target = e.target.classList.contains("fa-plus"); if (target === true) { d.childNodes[3].classList.toggle('show'); e.target.classList.toggle('fa-minus'); } }); }); };