Partage

[JQUERY] Parcourir tous les attributs

Boucle qui parcours tous les attributs contenu dans une DIV

Sujet résolu

17 septembre 2021 à 11:28:58

Bonjour,

j'ai commencé le JS et Jquery il y a une semaine en autodidacte et je bloque sur certaines choses. Je voudrais pouvoir générer des boutons de manière dynamique mais je n'y arrive pas , voir le code et les commentaires, cela est plus explicite.

Pouvez-vous me donner des pistes svp ?

Merci pour votre aide

// je voudrais que mes boutons soient créé dynamiquement en fonction de ma liste d'articles
// Actuellement cela ne me créé toujours le même bouton toto
for (var i=1; i<6; i++) {
$(document).ready(function(){
$(".listArticle").append($("#MesArticles a").attr("data-tag"));
});
 }

// mes boutons permettent d'afficher les articles correspondant :
$(document).ready(function(){

$(".BoutonTAB").click(function(){
$("a[data-tag*='toto']").toggleClass("Art-visible");
$("a[data-tag*='titi']").toggleClass("Art-visible");
$("a[data-tag*='tata']").toggleClass("Art-visible");
});
</script>
<body>

<!-- une liste de liens avec des TAGS, cachée par défaut -->
<div class="listArticle">
</div>
<div id="MesArticles" class="Contenu">
<a href="#1" class="Art-hidden " data-tag="toto"> Art1</a>
<a href="#1" class="Art-hidden " data-tag="tata">Art2</a>
<a href="#1" class="Art-hidden " data-tag="titi"> Art3</a>
<a href="#1" class="Art-hidden " data-tag="toto">Art4</a>
<a href="#1" class="Art-hidden " data-tag="toto tata"> Art5</a>
<a href="#1" class="Art-hidden " data-tag="titi">Art6</a>
<a href="#1" class="Art-hidden " data-tag="toto tata titi"> Art7</a>
<a href="#1" class="Art-hidden " data-tag="tata">Art8</a>
</div>
</div>

<div class="BoutonTAB">
</div>

</body>
</html>

-
Edité par MathieuGraça 17 septembre 2021 à 11:29:33

LucasWerquin

18 septembre 2021 à 11:18:31

Pas fan du JQuery, personnellement. Donc pas sûr d'apporter une solution qui te convienne.
Mais essayons

Je vois un gros souci aux lignes 3 à 7.
En gros, tu vas ajouter 6 fois un EventListener ( ready ) à ton document.
Puis à la ligne 10 tu lui en ajoute encore un o_O

Alors je suis pas expert et il y a peut-être quelque chose que je ne connais pas dans la syntaxe, tu me diras. Mais je pense que ton problème se situe là.

Selon ce que j'ai compris, à cet endroit tu cherches à ajouter les 5 premiers liens contenus dans la div "mesArticles".
Alors voilà comment je procèderais ( sans JQuery ) :

$(document).ready(function(){ //quand le document est chargé
   var liens = document.getElementById('MesArticles').children;
   for(let i=0; i<5; i++)
   {
      $(".listArticle").append(liens[i]);
   }
});

Alors heu, bon, j'ai parcouru très vite fait le cours sur JQuery, ça doit donc plutôt donner ça :

$(document).ready(function(){
   var liens = $("#MesArticles a");
   for(let i=0; i<5; i++)
   {
      $(".listArticle").append(liens[i]);
   }
});

Bon, maintenant j'explique pourquoi je n'aime pas trop jquery.
Si ce n'est que pour faire l'économie de quelques caractères par-ci par-là dans les définitions des éléments ou collections d'éléments, cela vaut-il vraiment le coup de charger la bibliothèque JQuery ?
Bon, il y a l'économie de temps à l'écriture, mais il y a aussi l'impact sur les performances, à savoir chaque reload de page provoque le transfert de la bibliothèque sur le réseau ( bon, sauf quand le navigateur sait qu'il a déjà le fichier dans le cache, d'accord, mais ça marche aussi pour les fichiers js ), et chaque utilisation de la syntaxe JQuery fait forcément appel à une ( ou des ) fonctions JQuery qui font bosser le navigateur.
A la lecture du cours j'ai pas été super convaincu. Moi avec un bon éditeur et l'auto complétion j'ai pas l'impression qu'écrire "à l'ancienne" me coûte tant que ça. Quand à la lecture d'un code, JQuery me demande plus d'efforts, ça c'est certain ( mais c'est peut-être juste un manque de pratique ).

MathieuGraça

20 septembre 2021 à 12:39:01

Salut, merci beaucoup pour cette réponse.

L'erreur est flagrante est je m'en veux de ne pas l'avoir vu par moi-même. Je dois avouer que je n'avais pas assez cherché à comprendre à quoi servait la ligne $(document).ready(function().

Ton avis sur Jquery est intéressant et j'ai l'impression que beaucoup de personnes partagent ton point de vue. Je n'avais pas conscience de cela, ne connaissant pas l’existence de JQUERY il y a encore quelques jours, à première vue cela me semblait être une "révolution".

J'ai testé les 2 morceaux de codes mais cela ne m'a créé aucun bouton, pourtant le code semble bon donc je pense qu'il faut que je vois tout mon code entier, il doit y avoir une coquille, je vais creuser et je pense garder la forme JS. Merci d'être venu à ma rescousse en tout cas :)

LucasWerquin

20 septembre 2021 à 13:23:04

Aucun souci.

Mon conseil est effectivement de faire quelque chose en javascript "pur" dans un premier temps. Bon, l'écriture est plus longue ( mais pas de beaucoup, finalement ) mais à l'avantage d'être un peu plus lisible, du coup.

Moi, j'écrirais quelque chose comme :

document.addEventListener('load', () => {
// écrire ici ce qu'on veut faire quand le document est chargé
});

Tu vois, c'est pas non plus une tartine de code, mais quand on comprend un peu l'anglais ça dit précisément ce qu'on cherche à faire. Après je peux pas garantir que ça fonctionne avec cette syntaxte-là, j'ai jamais tenté. Moi en général je colle ma balise <script> après la balise </body>, donc tout le document HTML est bien fini de charger, pas de "undefined" quand j'essaye un document.getElementById('someId').

Dernière chose, à la réflexion je suis pas sûr que tu peux append un élément HTML qui est déjà présent dans le document. append() ou appendChild() ne fonctionne peut-être qu'avec des élément créés mais pas encore intégrés au document ( méthode document.createElement() ).
Donc PAF! petite astuce il existe la fonction cloneNode :

element.cloneNode - Référence Web API | MDN

Soit normalement une seule toute petite instruction à insérer dans le code proposé plus haut ( voire même une légère complexification de l'instruction ligne 5 ).

MathieuGraça

20 septembre 2021 à 18:22:00

Merci pour ta réponse, de mon coté j'ai réécrit mon code de manière plus propre,

J'avais lu quelque part qu'il fallait mettre les scripts au dessus du body mais je ne sais plus très bien pourquoi. J'ai testé les 2 et ça fonctionne mais j'avoue avoir encore du mal à tout comprendre. Aujourd'hui pour alléger le contenu visuellement, j'ai un fichier .css et un .js à part.

A la tête de mon fichier script.js j'ai ajouté la ligne document.addEventListener('DOMContentLoaded', function() {
puis j'ai retiré tous mes $(document).ready(function(). Je n'ai pas encore réussi à faire fonctionner la création dynamiques des boutons, sans doute que c'est à cause du append comme tu dis.

Pour la fonction cloneNode, je n'ai pas encore testé mais ça a l'air de convenir parfaitement à ma situation. Mais à la vue de la documentation, j'ai peur que ça me donne le même nom sur chacun de mes boutons car si j'ai bien compris , tous les attributs sont copiés. Il faudra que je test demain pour voir ce que ça donne.

LucasWerquin

21 septembre 2021 à 8:32:56

Alors pour les fichiers séparés, je dis +1. C'est effectivement mieux de tout séparer pour s'y retrouver et ne pas avoir un fichier interminable.
Le document.addEventListener('DOMContentLoaded', function() {} c'est très bien, moi j'avoue que par flemme je fais l'import du fichier avec une balise script placée après la balise de fermeture du body, ça fait le job ( le doc HTML est complètement chargé au moment ou le JS est interprêté.

Pour la création dynamique de lien, entraîne-toi sur sur une base la plus simple possible. Pour tes attributs, tu peux facilement les modifier avec element.setAttribute('nomAttribut', valeurAttribut).

MathieuGraça

21 septembre 2021 à 18:02:22

Re,
j'ai réussi à avancer sur ce sujet. J'ai pas mal regardé du coté du clone, mais je n'ai pas réussi à l'adapter à ma situation. En continuant un peu avec le append, j'ai trouvé cette fonction qui marche plutôt bien mais qui reste à peaufiner :

$('#MesArticles a').each(function()
    {
        current = $(this).attr('data-tag');


        $(".BoutonTAB").append('<button id="btn'+current+'" class="btn"> '+current+'</button>');
    });

Pour rappel , voici une liste d’articles bidon pour les tests, la vrai liste est générée dynamiquement mais ressemble grosso modo à ça :

<a href="#1" class="Art-hidden " data-tag="toto"> Art1</a>
<a href="#1" class="Art-hidden " data-tag="tata">Art2</a>
<a href="#1" class="Art-hidden " data-tag="titi"> Art3</a>
<a href="#1" class="Art-hidden " data-tag="toto">Art4</a>
<a href="#1" class="Art-hidden " data-tag="toto tata"> Art5</a>
<a href="#1" class="Art-hidden " data-tag="titi">Art6</a>
<a href="#1" class="Art-hidden " data-tag="toto tata titi"> Art7</a>
<a href="#1" class="Art-hidden " data-tag="tata">Art8</a>

En sortie j'ai 1 bouton qui est créé pour chacun des <a> du coup j'ai plusieurs boutons toto et j'ai même un bouton nommé toto tata titi, je sèche un peu sur le formatage du résultat et sur le fait que mon élément doit être unique sinon il ne sera pas traité. J'y ai passé mon aprem, je retenterai demain

LucasWerquin

21 septembre 2021 à 18:47:27

Alors pour mémoire, l'attribut "id" doit être unique dans ton document.
Sinon, à te relire on dirait que je n'ai pas bien compris ton but.

En fait, tu veux créer, dans la div "boutonTAB", un bouton pour chaque lien présent dans la div "mesArticles" ?

Donc cloner les liens ne sert à rien.
Donc il faut que tu récupère une liste ( array ) des attributs "data-tag" de tes liens.
Ensuite parcourir ce array et pour chaque index créer un bouton, lui attribuer le data-tag, le contenu, et enfin l'append à ta div :

for(i=0; i<document.getElementById('MesArticles').children.length; i++) {  //pour tous les éléments enfants de la div 'MesArticles'
   let newButton = document.createElement('button'); //créer un nouvel élément bouton
   let dataTag = document.getElementById('MesArticles').children[i].getAttribute('data-tag'); // récupérer le data-tag de l'enfant i
   newButton.setAttribute('id', dataTag); //attribuer un id ayant la valeur du data-tag
   newButton.setAttribute('class', 'btn'); //attribuer la classe 'btn'
   newButton.innerHTML = dataTag; //écrire la valeur du data-tag récupéré dans le bouton
   document.getElementById('BoutonTAB').appendChild(newButton); //ajouter le bouton dans la div ( ici il faudrait que la div aie un id 'BoutonTAB' plutôt qu'une class
}

Voilà, c'est la démarche "pas à pas" que moi j'ai tendance à utiliser. Il y en a de plus efficace et moins verbeuses. Mais bon, moi j'ai pris cette habitude là, et ça fonctionne pas mal
Précision, les data-tag doivent être uniques, sinon tu auras un souci à vouloir créer plusieurs bouton ayant le même 'id'.

Et mets de côté le JQuery, j'ai l'impression qu'il t'embrouille plutôt qu'autre chose.
Il y a document.getElementById('id') pour récupérer un élément ayant l'id spécifiée,
document.getElementsByClassName('class') qui te renvoie un array de tous les éléments ayant la classe spécifiée ( fais bien attention au s d'Elements )
Et enfin, il y a document.querySelector('query') qui te renvoie le premier élément correspondant au sélecteur spécifié ( ce sont les même sélecteurs qu'en CSS ) et document.querySelectorAll('query') qui te renverra un array de tous les éléments correspondant au selecteur.

Je te file deux liens sur la doc MDN du document et des éléments, dont tu peux parcourir les fonction utiles pour la manipulation du DOM:

document - Référence Web API | MDN

element - Référence Web API | MDN

-
Edité par LucasWerquin 21 septembre 2021 à 18:56:24

MathieuGraça

21 septembre 2021 à 19:55:48

Merci pour ton retour,

avec le recul je me dis que j'aurai mieux fait de d'abord maitriser JS avant de passer au jquery, comme tu dis ça doit m'embrouiller plus qu'autre chose.
Sinon, tu as bien compris c'est bien un bouton qui est créé dans la div boutonTAB, avec un id unique , mais qui se réfère au data-tag (qui lui n'est pas unique) des articles.

Pour la liste des a href donnée plus haut, en sortie je devrais obtenir 3 boutons, un bouton toto un bouton tata et un bouton titi, le clic sur toto me ferait apparaitre uniquement les articles contenant le data-tag toto et cacherai les autres.

Par exemple l'article avec data-tag=toto tata titi se retrouverai dans les 3 listes

tout ça j'arrive à le faire parfaitement si je crée mes boutons de manière statique. C'est déjà un bon point

Merci pour ton code ainsi que les docs et merci aussi du temps que tu consacre à mon topic c'est sympa! je vais suivre ton conseil et appliquer un id à ma div boutonTAB, je vais potasser tout ça demain et je fais un retour !

LucasWerquin

21 septembre 2021 à 20:49:31

Ah, je comprend mieux ta demande.
J'y réfléchis à tête reposée demain.

[edit]

Bon, je m'y suis mis, et après avoir bien analysé la demande, qui n'est finalement pas si simple, voilà ce que j'ai :

HTML:

<div id="MesArticles" class="Contenu">
   <a href="#1" class="Art-hidden " data-tag="toto"> Art1</a>
   <a href="#1" class="Art-hidden " data-tag="tata">Art2</a>
   <a href="#1" class="Art-hidden " data-tag="titi"> Art3</a>
   <a href="#1" class="Art-hidden " data-tag="toto">Art4</a>
   <a href="#1" class="Art-hidden " data-tag="toto tata"> Art5</a>
   <a href="#1" class="Art-hidden " data-tag="titi">Art6</a>
   <a href="#1" class="Art-hidden " data-tag="toto tata titi"> Art7</a>
   <a href="#1" class="Art-hidden " data-tag="tata">Art8</a>
</div>

<div id="TABbuttons" class="BoutonTAB">
</div>

Tu feras bien attention à tes balises, dans le HTML que tu as donné en début de sujet, tu as une fermeture de div en trop ( ligne 33 ).

Le CSS:

.Art-hidden{
    display: none;
}

.Art-visible{
    display: inline;
}

Et pour finir le js :

document.addEventListener('DOMContentLoaded', () => { //lance la fonction createTABbuttons une fois le DOM chargé
    createTABbuttons();
});

const createTABbuttons = function() { //créé les boutons TAB
    let tagList = []; //déclare un array vide, qui sera rempli par les tags récupérés
    let items = document.getElementById('MesArticles').children; //récupère un array contenant les liens contenus dans 'MesArticles'
    for(let i=0; i<items.length; i++){ //pour chaque lien
        let dataTags = items[i].getAttribute('data-tag').split(' '); //récupère le data-tag, puis le transforme en array de tags
        for(let y=0;y<dataTags.length;y++){ //Pour chaque tag de ce lien
            if(!tagList.includes(dataTags[y])) //si le array tagList ne contient pas le tag
                tagList.push(dataTags[y]); //l'ajouter
        }
    }
    
    for(i=0;i<tagList.length;i++){ //pour chaque tag contenu dans le array tagList
        let newButton = document.createElement('button'); //créer un élément button
        newButton.setAttribute('class', "btn"); //lui attribuer la class 'btn'
        newButton.setAttribute('id', 'TABbtn_' + tagList[i]); //lui attribuer un id
        newButton.innerHTML = tagList[i]; //remplir le bouton avec la valeur du tag
        newButton.addEventListener('click', () => { //lui ajouter un eventListener
            let tag = event.target.getAttribute('id').substring(7); // event.target = l'élément qui a déclenché l'évènement ( sur lequel on a cliqué ). On découpé son id pour ne garder que le nom du tag
            for(i=0;i<document.getElementById('MesArticles').children.length;i++){ //pour chaque lien de 'MesArticles'
                if(document.getElementById('MesArticles').children[i].getAttribute('data-tag').indexOf(tag)>-1) //si le data-tag contient le tag
                    document.getElementById('MesArticles').children[i].setAttribute('class', 'Art-visible'); //le rendre visible
                else
                    document.getElementById('MesArticles').children[i].setAttribute('class', 'Art-hidden'); //sinon le cacher
            }
        });
        document.getElementById('TABbuttons').appendChild(newButton); //ajouter le bouton créé dans 'TABbuttons
    }
}

Voilà, j'ai bien détaillé la démarche pour que tu essayes de comprendre ce que fais le code. Pas un poil de JQuery là-dedans.
Avantage de cette méthode, si tu ajoute un nouvel article avec un data-tag contenant "tutu" ou "tonton", les boutons tutu et tonton seront créés. Bien veiller à ce que le data-tag soit bien rédigé, avec des tags séparés par un et un seul espace, pas d'espace avant le premier ou après le dernier tag.

-
Edité par LucasWerquin 22 septembre 2021 à 10:01:48

MathieuGraça

23 septembre 2021 à 13:28:31

Merci pour ton retour, j'ai réussi a reproduire et à comprendre le fonctionnement de ta fonction, j'ai vraiment du mal avec les array je me doutais bien qu'il fallait stocker mes tags la dedans, mais je suis incapable d'arriver à me les représenter dans ma tête, j'ai essayé par écrit mais j'ai l'impression que mon cerveau a des limites de ce coté là.

Désolé pour le div en trop, à l'époque j'avais fait du copier coller sélectif de mon fichier initial (qui contenait le CSS + HTML + JS, bref un beau bordel) je me suis loupé en copiant collant ici les morceaux.

je trouve astucieux le substring(7) , en fait c'est logique mais ça m'étais pas venu à l'idée.

Je vais essayer d'adapter de code à ma situation, car en fait, ma liste d'articles ne contient pas que des balises <a> sinon ce serait trop beau
(En fait j'avais mi un H2 en début de liste mais que je n'avais pas copié ici car je pensais que ça n'apportait rien)

    <div id="MesArticles" class="Contenu">
      <h2 class="topic">
        Liste de mes articles
      </h2>

<a href="#1" class="Art-hidden " data-tag="toto"> Art1</a>
<a href="#1" class="Art-hidden " data-tag="tata">Art2</a>

A première vue je dirais que c'est la ligne suivante :

 let dataTags = items[i].getAttribute('data-tag')

qui doit surement poser problème car il tombe sur un item qui n'a pas de data-tag, je me trompe peut-être mais je vais creuser de ce coté là.

LucasWerquin

23 septembre 2021 à 13:41:39

Oui, étant entendu que document.getElementById('MesArticles').children récupère TOUS les éléments enfants de la div. Donc si tu colle un <h2>, qui n'a aucun intérêt dans ton script, il peut poser problème. Après, sur le array renvoyé par children, tu peux boucler à partir de l'indice 1 et non 0, mettant ainsi de côté ce <h2>.

En revanche, je me doute que de simple liens ne sont pas forcément un bon moyen de faire une belle présentation de tes articles. Mais en l'état ce script récupère les enfants directs de la div. Donc ça peut tout aussi bien être des divs, par exemple. L'important est que ce sont ces divs qui doivent avoir les attributs dont tu as besoin, mais ces divs peuvent contenir tout un tas d'enfants, une image, une description...

L'essentiel est de bien comprendre toute cette démarche, et d'adapter au fur et à mesure, de creuser un peu plus loin les possibilités.

Le array ? Ce n'est pas très compliqué à comprendre, et en tout cas très pratique. Pour essayer d'aider, le array est une manière de regrouper sous un même nom une liste ordonnée de valeurs.
Ex : var joursDeLaSemaine = ['lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi', 'dimanche'];
c'est une liste ordonnées, le lundi est avant le mardi, le samedi est après le vendredi mais avant le dimanche...
Très pratique pour "itérer" sur les valeurs, c'est-à-dire faire quelque chose pour chaque élément de la liste avec une boucle for(), ou for of.
Les fonctions natives comme getElementsByClassName ou la propriété children renvoient un array d'éléments.

Bonne continuation

-
Edité par LucasWerquin 23 septembre 2021 à 13:51:44

MathieuGraça

23 septembre 2021 à 13:52:01

En l'état même si le code ne fait pas de présentation ce n'est pas grave je vais apprendre à le modifier en fonction de ce que je veux faire, c'est déjà "moteur" et je n'ai plus qu'à adapter comme tu dis, je vois ça déjà se faire en modifiant par exemple

for(let i=1; i<items.length; i=i+2)

De cette manière je pourrais mettre des balises icone ou autres. Bon pour l'instant c’était pas le but, mais je ne sais pas encore ou mes idées m’emmèneront :D

Merci encore pour ton aide en tout cas , tu m'a permis d'y voir plus clair dans tout ça , bonne continuation à toi aussi!

LucasWerquin

23 septembre 2021 à 13:57:34

Non, comme je viens de l'expliquer, tu peux remplacer les liens par des divs. Ce sont les divs qui ont l'attribut data-tag, et ces divs peuvent contenir autant d'enfants que voulu ( un titre, une image, une description... ).

MathieuGraça

23 septembre 2021 à 14:12:33

Oui en fait je voulais rééditer mon message car je me suis rendu compte après coup que c’était pas du joli.

Je retiens l'idée des <Div data-tag= etc> pour que cela apparaisse

L'ajout d'un getElementsByTagName me parait pas mal, mon H2 sera en dur et sans data-tag du coup :

let items = document.getElementById('MesArticles').getElementsByTagName("a");

-
Edité par MathieuGraça 23 septembre 2021 à 14:20:23

LucasWerquin

23 septembre 2021 à 14:28:53

Oui, autre solution. sinon un emboitement supplémentaire :

<div id="articles_container">
   <h2>Mes articles</h2>
   <div id="MesArticles">
      <a>
      <a>
      ...
   </div>
</div>

Ou encore querySelectorAll() :

document.querySelectorAll('#MesArticles a') // pour les liens contenu dans la div ayant pour id "MesArticles"