Boucle et attribut

**Antoniom** · 26/04/2015, 10h16

Bonjour à tous,

J'ai un slider avec cinq images dans des balises <a> qui tournent en boucle, et je souhaiterais leur affecter l'attribut href grâce à un array.
J'ai, entre autres, tenté ceci...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
var arr = ["http://www.google.fr", "http://www.yahoo.fr", "http://www.youtube.com", "http://www.developpez.net", "https://api.jquery.com"];
 
    jQuery.each(arr, function(chemin) {
    jQuery(".lien-basses").attr("href", arr[chemin]);
 
});

Puis avec une boucle For, une While, ou une variable genre i++, dans tous les sens, rien à faire, j'obtiens ou le premier, ou le dernier lien, mais pas chacun le sien...

Est-ce possible ? Si oui, pouvez-vous m'aider svp..

Par avance merci !

**danielhagnoul** · 26/04/2015, 11h06

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

jQuery.each(arr, function(i, chemin) {

**sekaijin** · 26/04/2015, 11h11

simple

javascript et le moteur HTML s'exécute en mode synchrone (comme si c'était le même thread).
c'est a dire que lorsque l'un travail l'autre attend

dans ton cas javascript à la main
il affecte successivement les valeurs à l'attribut
et lorsqu'il a passé toute les valeurs, il rend la main à HTML
là le moteur détecte que l'attribut href a changé et re-dessine la zone du DOM correspondante.

donc lorsqu'il prend la main il n'y a plus que la dernière valeur affecté qui est prise en compte.

de toutes façons même si le moteur re-dessinait la zone à chaque itération tu ne le verrait pas. le temps d'une boucle est de l'ordre de la nano seconde. beaucoup trop rapide pour l'oeil humain.

il ne te faut pas faire de boucle mais gérer des événements.

A+JYT

**Antoniom** · 26/04/2015, 11h49

Slt,

D'abord, merci pour vos réponses !

Daniel, j'avais déjà essayé comme tu propose et testé toutes ces solutions ci-dessous, en vain.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
jQuery.each(arr, function(i, chemin) {
	jQuery(".lien-basses").attr("href", arr[i]);
});
jQuery.each(arr, function(i, chemin) {
	jQuery(".lien-basses").attr("href", arr[chemin]);
});
jQuery.each(arr, function(i, chemin) {
	jQuery(".lien-basses").attr("href", i);
});
jQuery.each(arr, function(i, chemin) {
jQuery(".lien-basses").attr("href", arr[i, chemin]);
});
jQuery.each(arr, function(i, chemin) {
	jQuery(".lien-basses").attr("href", arr[chemin, i]);
});
jQuery.each(arr, function(i, chemin) {
	jQuery(".lien-basses").attr("href", arr[i]+chemin);
});
jQuery.each(arr, function(i, chemin) {
	jQuery(".lien-basses").attr("href", arr[chemin]+i);
});

Sekaijin, au risque de passer pour un ignare, je ne suis pas assez fortiche encore et me demande comment gérer les événements... "Simple" ? hmm pas pour un novice..
Un exemple serait le bienvenu si tu veux.

Bref je vais finir par passer mon dimanche à chercher..

EDIT :
J'ai aussi testé comme ceci...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
var I = 0;
jQuery.each(arr, function(chemin) {
    jQuery(".lien-basses").attr("href", arr[i]);
    i++;
});
var I = 0;
jQuery.each(arr, function(chemin) {
    jQuery(".lien-basses").attr("href", arr[chemin]);
    i++;
});

Bref, ça ne marche pas !

**Auteur** · 26/04/2015, 12h38

Bonjour,

au risque de répondre à côté :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function setHref()
{
	var arr = ["http://www.google.fr", "http://www.yahoo.fr", "http://www.youtube.com", "http://www.developpez.net", "https://api.jquery.com"];
	var e, i, n;
 
	e = document.getElementsByTagName("a");
	n = e.length;
	for (i=0; i<n; i++)
	{
		if (e[i].className=="lien-basses")
			e[i].href = arr[i];
	}
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<body onload="setHref()">
 
<a href="" class="lien-basses">lien 1</a>
<a href="" class="lien-basses">lien 2</a>
<a href="" class="lien-basses">lien 3</a>
<a href="" class="lien-basses">lien 4</a>
<a href="" class="lien-basses">lien 5</a>
 
</body>

**NoSmoking** · 26/04/2015, 14h31

Bonjour,
Daniel ta donné la voie en te proposant jQuery.each(arr, function(i, chemin), seulement voilà il faut comprendre ce que fait cette méthode et une bonne façon de le savoir et de se pencher dans la documentation.

Ceci étant jQuery(".lien-basses") te retourne une collection d'objet jQuery, donc dans ta boucle tu affectes à TOUS les élements la même valeur soit à la sortie de la boucle la dernière valeur.

@Auteur :

e = document.getElementsByTagName("a");

il existe la méthode de l'objet document querySelectorAll( selector) qui permet de récupérer directement des éléments ayant une classe particulière

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var lstLiens = document.querySelectorAll('a.lien-basses');

**Auteur** · 26/04/2015, 18h29

Envoyé par NoSmoking

@Auteur :
il existe la méthode de l'objet document querySelectorAll( selector) qui permet de récupérer directement des éléments ayant une classe particulière

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var lstLiens = document.querySelectorAll('a.lien-basses');

Il y a un bail que je ne me suis plus plongé dans le JS je ne suis donc plus très à jour

Je retiens cette méthode

**sekaijin** · 26/04/2015, 14h35

Envoyé par Antoniom

Slt...
sekaijin, au risque de passer pour un ignare, je ne suis pas assez fortiche encore et me demande comment gérer les événements... "Simple" ? hmm pas pour un novice..

ce qui est simple c'est la raison pour laquelle ça ne peux pas marcher.

je résume
lire le HTML
Afficher l'objet A avec l'attribut href = a1
exécuter le javascript
faire la boucle
affecter a2 à l'attribut href de l'objet A
affecter a3 à l'attribut href de l'objet A
affecter a4 à l'attribut href de l'objet A
affecter a5 à l'attribut href de l'objet A
affecter a6 à l'attribut href de l'objet A
affecter a7 à l'attribut href de l'objet A
affecter a8 à l'attribut href de l'objet A
sortir de la boucle
rendre la main à HTML
afficher l'objet A avec la valeur de l'attribut href = a8

voilà ce que tu fais
tu peux torturer ton code dans tous les sens ça ne peux pas marcher.
pour la simple raison que tu fini ta boucle avant de rendre la main à html

tu ne peux pas utiliser une boucle pour afficher successivement plusieurs objets.
pour ça il te faut géré un événement
par exemple afficher un objet lorsque l'utilisateur clique sur quelque chose

ou encore afficher l'objet suivant lorsque x seconde se sont écoulé.

le mot important dans la façon de penser est : lorsque
le principe en programmation événementielle est
Faire ceci lorsque cela se produit.
le cela s'appelle un événement et le ceci une action.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
var index = 0;
 
function showNext() {
  jQuery(".lien-basses").attr("href", arr[i]);
  i = (i + 1) % arr.length; // passer au suivant;
}
 
//ici on traite l'événement 
// faire showNext lorsque 10 s (10000 mili-secondes)
setTimeout(showNext, 10000);

A+JYT

**Antoniom** · 26/04/2015, 15h46

Hello,

Merci de votre patience...

Ok j'ai saisis le problème JYT.

Je teste ça et reviens clôturer la discussion... si j'y parviens vu mon état de fatigue après la nuit bianca que je viens de me faire

Auteur, ton code idem ça jour pas, mais maintenant c'est sur que ça doit être à cause du même problème que disent JYT et Sekaijin.

Merci à tous pour vos lumières !

**NoSmoking** · 26/04/2015, 16h07

Auteur, ton code idem ça jour pas(...)

son code est tout à fait fonctionnel sauf si tu souhaites faire autre chose que nous n'avons pas saisi, ce qui semble être le cas vu le commentaire fait par sekaijin (qui est JYT ou inversement )!

Boucle et attribut

jQuery

Vue hybride

Discussions similaires

Partager

Partager