Boucle et attribut

Version imprimable

Boucle et attribut

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:

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 !

26/04/2015, 11h06
danielhagnoul

Code:

jQuery.each(arr, function(i, chemin) {
26/04/2015, 11h11
sekaijin

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

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:

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.. :mouarf:

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

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 !

Bonjour,

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

Code:

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:

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>

26/04/2015, 14h31
NoSmoking
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.
:faq:
- Comment puis-je sélectionner un élément à l'aide d'une classe ou d'un id ?
- Quelle différence y a-t-il entre $(...)[0] et $(...).eq(0) ?.
@Auteur :

Citation:

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:

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

Citation:

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:

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

26/04/2015, 15h46
Antoniom

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 8O

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 !
26/04/2015, 16h07
NoSmoking

Citation:

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

:koi: 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 ;))!
26/04/2015, 18h29
Auteur

Citation:

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:

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 :oops: Je retiens cette méthode :ccool:

jour

pour faire ca j'utilise setAttribute ou sinon il faut passer par une fonction intermediaire

setAttribute

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
 
 .lien-basses{
      border:1px solid black;
      border-collapse:collapse;
      text-align:center;
	  padding:10px;
	  width:80px
  }
</style>
 <script>
 
var arr = ["http://www.google.fr", "http://www.yahoo.fr", "http://www.youtube.com", "http://www.developpez.net", "https://api.jquery.com"];
 
function remplir(){
 
	var all=document.querySelectorAll('.lien-basses');
 
	for( var i=0;i<all.length;i++){
 
	all[i].setAttribute('href',arr[i])
	}
}
</script>
</head>
<body>
 
<table id="tableaux_x">
<tr>
<td> <a class='lien-basses'> site 1</a></td>
<td> <a class='lien-basses'> site 2</a></td>
<td> <a class='lien-basses'> site 3</a></td>
<td> <a class='lien-basses'> site 4</a></td>
<td> <a class='lien-basses'> site 5</a></td>
 </tr>
</table>
<br><br>
<input type='button' value ='remplir' onclick='remplir()'>
</body>
</html>

function intermediaire

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
 
 .lien-basses{
      border:1px solid black;
      border-collapse:collapse;
      text-align:center;
	  padding:10px;
	  width:80px
  }
</style>
 <script>
 
var arr = ["http://www.google.fr", "http://www.yahoo.fr", "http://www.youtube.com", "http://www.developpez.net", "https://api.jquery.com"];
 
function remplir(){
 
	var all=document.querySelectorAll('.lien-basses');
 
	for( var i=0;i<all.length;i++){
 
	intermediaire(all[i],arr[i])
	}
}
 
function intermediaire(elem,lien){
 
elem.href=lien
 
}
</script>
</head>
<body>
 
<table id="tableaux_x">
<tr>
<td> <a class='lien-basses'> site 1</a></td>
<td> <a class='lien-basses'> site 2</a></td>
<td> <a class='lien-basses'> site 3</a></td>
<td> <a class='lien-basses'> site 4</a></td>
<td> <a class='lien-basses'> site 5</a></td>
 </tr>
</table>
<br><br>
<input type='button' value ='remplir' onclick='remplir()'>
</body>
</html>

27/04/2015, 11h19
danielhagnoul

Il n'y a rien à redire sur l'explication de sekaijin.

Je me suis contenté de corriger l'écriture du each car c'est tout ce qu'il est possible de faire sur l'extrait de code de votre premier message.

Citation:

J'ai un slider avec cinq images dans des balises <a>

Codes (CSS, HTML, JS) ?
27/04/2015, 23h57
Antoniom

Hello,

Merci à tous pour votre aide et désolé de ne pas avoir répondu avant !

Et bien mauvaise nouvelle, malgré vos explications, je n'y parviens pas.. rien à faire.

Daniel, c'est le slider Fancybox avec lequel je travaille et je voudrais que l'attribut title qui est la légende, soit aussi un lien.

Je m'amuse à modifier, ajouter des balises dans le js, mais peut-être que ce n'est simplement pas possible ?
28/04/2015, 13h29
Antoniom

Hello,

Bon ben j'ai changé de lightbox, j'ai shooté la Fancybox pour la OrangeBox qui fait ce que je veux.

Pour ceux qui ne la connaissent pas, elle est super.

Merci encore à tous pour votre aide !