Connaître l'index d'une valeur dans un tableau

Version imprimable

23/01/2011, 22h23
chok371

Connaître l'index d'une valeur dans un tableau

Bonjour,

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

Exemple :

Code:

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.

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:

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

24/01/2011, 09h47
Bovino

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

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:

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; }

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

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

Code:

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>

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:

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:

alert(cibleImg.arrayIndex(this.src))

Le script ne fonctionne plus.

26/01/2011, 07h57
Bovino

Peut être que cibleImg n'est pas vraiment un tableau.
26/01/2011, 08h30
SpaceFrog

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 ?

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:

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

26/01/2011, 19h41
chok371

Merci !