Connaître l'index d'une valeur dans un tableau [Résolu]

chok371 · 23/01/2011, 22h23

Bonjour,

J'aimerais pouvoir stocker dans une variable l'index d'une valeur d'un tableau.

Exemple :

Code :

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

var tab = ["a", "b", "c", "d"];

Si le tableau contient, par exemple, une liste d'images, je sais que je pourrais faire :

Citation:

this.src;

Ça va me retourner l'src de l'image sur laquelle je clique. Si j'aurais fais "this.id" ça m'aurait retourner l'id de l'image. Mais si je veux qu'on me retourne la position de cette image dans le tableau (si elle est dans l'index 0, 1, ou 2...), comment faire ? Est ce qu'il existe un "this.index" ?

Comment faire pour stocker dans une variable la position de l'élément du tableau sur lequel on vient de cliquer ?

Merci.

SpaceFrog · 24/01/2011, 08h52

Cela suppose l'unicité de tes éléments d'array... ou alors ton arrayIndex devra retourner un tableau

Mais on peut imaginer un prototype du genre:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
Array.prototype.arrayIndex=function(valeur){
var i=-1;
var indexes = new Array();
while (this[++i]){
	if (this[i]===valeur){
		indexes.push(i);}
 }
return (indexes.length>0)? indexes:-1;
}		
 
var tab = ["a", "b", "c", "d","b"];
 
alert(tab.arrayIndex('b'))

retourne un tableau des indexes correspondants à la valeur recherchée, ou -1 si pas d'occurrences

Bovino · 24/01/2011, 09h47

A noter qu'il existe aussi la méthode indexOf() pour les array, mais elle n'est pas compatible IE

RomainVALERI · 24/01/2011, 10h07

Citation:

Envoyé par Bovino

A noter qu'il existe aussi la méthode indexOf() pour les array, mais elle n'est pas compatible IE

...auquel cas on peut également la redéfinir en s'inspirant par exemple de Prototype ^^
(c'est ce que j'ai fait de mon côté suite je crois à un conseil de vermine

)

Code javascript :

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

1
2
3
4
5
6
7
8
9
// rustine tirée de Prototype (merci les gars ^_^') pour assurer Array.indexOf dans IE
if (!Array.prototype.indexOf) Array.prototype.indexOf = function(item, i) {
  i || (i = 0);
  var length = this.length;
  if (i < 0) i = length + i;
  for (; i < length; i++)
    if (this[i] === item) return i;
  return -1;
}

NoSmoking · 24/01/2011, 13h16

on peut également passer par les tableaux associatifs
petit exemple pour illustrer

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
23
24
25
26
27
28
<html>
<head>
</head>
<body>
  <img src="img/image1.jpg">
  <img src="img/image2.jpg">
  <img src="img/image3.jpg">
  <img src="img/image4.jpg">
</body>
<script type="text/javascript">
// le tableau 
var tImage = [];
// la fonction de lecture
function getIndex( tab, ref){
  return tab[ ref] ? tab[ ref] :-1;
}
// la recuperation et initialisation
for( var i=0, nb =document.images.length; i < nb; i++){
  var oImg = document.images[i];
  // affectation
  tImage[oImg.src] = i+1;
  // fct sur click pour voir
  oImg.onclick = function(){
     alert( 'image n° ' +getIndex( tImage, this.src));
  }
}
</script>
</html>

à condition de l'avoir initialisé au paravent.

javatwister · 24/01/2011, 20h07

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
<script type="text/javascript">
 
var tab = ["un", "deux", "trois", "quatre","cinq"];
 
function cherch(n){
	for(i in tab){
		if(tab[i]==n){
			alert(n + "\n\na été trouvé à l'index " + i + " du tableau");break;
		}
	}
}
 
cherch("trois");
 
</script>

chok371 · 26/01/2011, 02h31

Citation:

Envoyé par SpaceFrog

Cela suppose l'unicité de tes éléments d'array... ou alors ton arrayIndex devra retourner un tableau

Mais on peut imaginer un prototype du genre:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
Array.prototype.arrayIndex=function(valeur){
var i=-1;
var indexes = new Array();
while (this[++i]){
	if (this[i]===valeur){
		indexes.push(i);}
 }
return (indexes.length>0)? indexes:-1;
}		
 
var tab = ["a", "b", "c", "d","b"];
 
alert(tab.arrayIndex('b'))

retourne un tableau des indexes correspondants à la valeur recherchée, ou -1 si pas d'occurrences

Merci !

Par contre, ça ne marche pas sur mon script...

J'ai un tableau qui se nomme cibleImg et qui contient pleins d'images.

Quand je fais this.src, je reçois le chemin de l'image sur lequel j'ai cliqué.

Mais quand j'utilise ta fonction et fais :

Code :

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

alert(cibleImg.arrayIndex(this.src))

Le script ne fonctionne plus.

Bovino · 26/01/2011, 07h57

Peut être que cibleImg n'est pas vraiment un tableau.

SpaceFrog · 26/01/2011, 08h30

Citation:

à condition de l'avoir initialisé au paravent.

pour se planquer derrière ??
ne pas confondre auparavant et un paravent

array, objet collection ...
on peut le voir ce mystérieux objet ?

NoSmoking · 26/01/2011, 10h20

Citation:

Envoyé par SpaceFrog

pour se planquer derrière ??
ne pas confondre auparavant et un paravent

on eut pu croire à de l'humour, mais il n'en est rien c'est bien une coquille...

Concernant le sujet traité, il y a encore la possibilité d'utiliser l'attribut tabIndex, même si non valide W3C, celui ci étant supporté sur les IMG par les navigateurs.

Le script que j'ai proposé devenant

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
// le tableau 
var tImage = [];
// la fonction de lecture
function getIndex( tab, ref){
  return tab[ ref] ? tab[ ref] :-1;
}
// la recuperation et initialisation
for( var i=0, nb =document.images.length; i < nb; i++){
  var oImg = document.images[i];
  var index = i+1;
  // affectation
  tImage[oImg.src] = index;
  // ajout tabindex
  oImg.setAttribute('tabIndex', index);
  // fct sur click pour voir
  oImg.onclick = function(){
     alert( 'image n° ' +getIndex( tImage, this.src) +'\ntabIndex : ' +this.getAttribute('tabIndex'));
  }
}

par exemple

chok371 · 26/01/2011, 19h41

Merci !

24/01/2011, 09h47	#3
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 802 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 802 Points : 35 807 Points : 35 807	A noter qu'il existe aussi la méthode indexOf() pour les array, mais elle n'est pas compatible IE __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

26/01/2011, 07h57	#8
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 802 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 802 Points : 35 807 Points : 35 807	Peut être que cibleImg n'est pas vraiment un tableau. __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

26/01/2011, 19h41	#11
chok371 Nouveau Membre du Club Inscription : mars 2010 Messages : 82 Détails du profil Informations forums : Inscription : mars 2010 Messages : 82 Points : 27 Points : 27	Merci !
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email