Traduire code jQuery en JS pur (pour navbar multi-level - Bootstrap 5)

Citation:

---

Envoyé par Beginner.

Oui je m'en doute, BootStrap n'invente rien mais j'ai l'impression que c'est à la mode, ça a l'air très répandu...

---

Bien des gens l'utilisent croyant se faciliter la tâche mais bien souvent ce n'est pas le cas si tu ne connais pas un minimum le CSS et si tu n'es pas curieux de lire la documentation très abondante, voire peut-être trop.

Citation:

---

Envoyé par Beginner.

Perso je n'aime pas trop les boites noires,j'aime bien savoir comment les choses sont faites, c'est plus instructif... C'est entre autres pour cela que je préfère éviter JQuery, BootStrap... du moins au début mais c'est vrai que pour être productif on doit parfois utiliser ce qui existe déjà...

---

Ce ne sont pas des boîtes noires mais plutôt de bêtes noires, non je déconne. Les sources sont à disposition et il est toujours intéressant de voir ce qu'il y a sous le capot, déjà cela démystifie la bête et c'est souvent très instructif quant à la manière d'aborder les choses.

Citation:

---

Envoyé par Beginner.

Je pense qu'il y a d'autres cas où son usage peut être intéressants... On peut vouloir limiter le nombre d'écouteurs et de gestionnaire d’événement, je suppose que c'est plus performant et moins gourmand en ressources mais je trouve aussi que c'est plus lisible, que c'est plus simple de voir qui fait quoi...

---

Sur des <table> de grande dimension cela peut effectivement être intéressant mais il faut regarder dans ce cas les performances dues aux parcours des événements. C'est donc au cas par cas voire en fonction de tes besoins/habitudes.

Bien des choses peuvent être réalisée comme par exemple tester le type de l'événement dans un handler commun.

Citation:

---

Envoyé par jreaux62

Mais ça peut certainement se faire aussi en JS, au chargement de la page.

---

C'est tout à fait faisable et ce de plusieurs manières
Par exemple en modifiant le HTML par emplacement de l'élément concerné :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

// une fois la page chargée document.addEventListener("DOMContentLoaded", () => { // récup. href de la page const docHref = document.location.pathname.split("/").pop(); // récup. des liens de la page => collection existante const linksPage = document.links; // c'est parti ! for (let link of linksPage) { // on n'a pas besoin du nom complet, du hash et du search const href = link.getAttribute("href").split(/[#|?]/).shift().split("/").pop(); // occcurence trouvée if (docHref === href) { const parent = link.parentElement; const newNode = document.createElement("SPAN"); newNode.textContent = link.textContent; newNode.classList.add("active"); parent.replaceChild(newNode, link); } } });

---

ou encore en utilisant le CSS et la déclaration pointer-events: none sur l’élément concerné :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

document.addEventListener("DOMContentLoaded", () => { // récup. href de la page const docHref = document.location.pathname.split("/").pop(); // récup. des liens de la page => collection existante const linksPage = document.links; // c'est parti ! for (let link of linksPage) { // on n'a pas besoin du nom complet, du hash et du search const href = link.getAttribute("href").split(/[#|?]/).shift().split("/").pop(); console.log(link.href) console.log(href) // occcurence trouvée if (docHref === href) { link.classList.add("active"); // ou encore mettre -> link.href="#"; } } });

---

Les deux méthodes, il y en a sûrement d'autres mais je n'ai que ces deux en stock, traitent le element.getAttributes("href") qui est succinct et non pas le element.href qui lui contient l'URL complète.

Citation:

---

Envoyé par Doksuri

ce que je faisais, c'est qu'apres avoir trouve l'equivalent en JS, j'allais voir la doc sur MDN

---

cette démarche est surprenante, perso c'est quand il y en avait marre d'écrire de la prose pour pas trop de choses que je regardais s'il y avait pas un équivalent en jQuery. J'ai trouvé à chaque fois.

J'ai toujours privilégié le « vanilla » mais lorsque l'on a un plugin qui fait bien le job et bien on passe à jQuery sans regret, c'est intellectuellement moins satisfaisant mais tellement plus rapide :mrgreen:.

Comme les API ont évoluées et empruntées beaucoup à jQuery il est vrai que cela devient de moins en moins utile.