[Résolu] Ajouter un attribut

Question

zero974

17 Apr 2020 à 23:25

Bonjour
je galère sur un truc tout bête dont je ne comprends pas où je me plante... ou sinon comment faire...
en HTML j'ai :


<div class="active">
  <a href="#">page1</a>
</div>
<div>
   <a href="#">page2</a>
</div>
<div>
   <a href="#">page3</a>
</div>

je souhaite ajouter l'attribut aria-current="true" sur la balise a enfant du div qui contient la classe 'active' (à savoir que n'importe quel div est susceptible d'avoir cette classe)
du coup j'étais parti sur un code en js de ce style (qui bien sur ne fonctionne pas sinon je ne serai pas là)


var x = document.getElementsByClassName('active');
var y = x.getElementsByTagName('a');
var i;
for (i = 0; i < y.length; i++) {
  y[i].setAttribute('aria-current', 'true');
}

Pouvez vous m'aider ?
Merci d'avance
Modifié par zero974 (18 Apr 2020 - 00:38)

Wazazaby

18 Apr 2020 à 01:10

Salut!

Quand tu fais

var x = document.getElementsByClassName('active');

ta variable x contient en fait un tableau (de type HTMLCollection), c'est pourquoi ton deuxième sélecteur ne marche pas puisque la méthode "getElementsByTagName" ne peut pas être appellée sur un tableau.

Pour ça, il faudrait que tu boucles sur x, et que pour chaque élément dans x tu ailles récupérer le (ou les) <a> qui s'y trouve (dans le cas ou plusieurs <div> auraient la classe active). Voilà un exemple :


// Je récupère tous les éléments qui ont la classes 'active'
	const divActives = document.getElementsByClassName('active');

	// Je vérifie que j'ai au moins un élément
	if (divActives.length > 0) {

		// Je boucle sur tous les éléments qui ont la classe 'active'
		for (const oneDivActive of divActives) {

			// Pour chaque div, je récupère tous les liens qui se trouvent dedans
			const links = oneDivActive.getElementsByTagName('a');

			// Je vérifie qu'il y ait au moins un lien
			if (links.length > 0) {

				// Je boucle sur chacun des liens pour set l'attribut 'aria-current'
				for (const oneLink of links) {
					oneLink.setAttribute('aria-current', true);
				}
			}
		}
	}

Dans mon exemple j'utilise une boucle for...of plutôt qu'un for normal car je trouve cela plus lisible (et moins verbeux), mais tu peux très bien le faire avec une boucle for standard.
Modifié par Wazazaby (18 Apr 2020 - 01:12)

zero974

19 Apr 2020 à 01:14

Merci beaucoup pour ton exeplication, je vais essayer de bien étudier tout ça pour bien comprendre
merci bcp
Modifié par zero974 (19 Apr 2020 - 01:15)

Sujet clos

JavaScript, DOM et API Web HTML5

[Résolu] Ajouter un attribut