Heute habe ich einige Zeit, mit einem jQuery Problem verbracht. Als einfaches Beispiel soll folgenden Aufgabe dienen:

Es sollen alle Links in einer Seite mit einem "onclick" versehen werden, der den Index des Links per "alert" ausgibt.

Klingt eigentlich recht einfach, folgendes habe ich probiert:

1
2
3
4
5
6
7
8
9

var links = $('a');
for (var i = 0, ii = links.length; i < ii; i++) 
{
	$(links[i]).bind({
		click: function() {
			alert( "Link Index: " + i ); 
		}
	});
}

Sieht eigentlich gut aus, jedoch ist es nicht das gewünschte Ergebnis, die Ausgabe enthält immer den gleichen Wert.

Es ist übrigens egal, ob man die "bind" Funktion oder nur die "click" Funktion verwendet, das verhalten ist gleich, scheinbar werden die "Binds" erst nach Beendigung der Schleife ausgeführt, so dass immer nur der letzte Index Wert verwendet wird.

Die Lösung für das Problem ist recht einfach, man muss nur darauf kommen.

1
2
3
4
5
6
7
8
9
10

var links = $('a');
$(links).each(
	function(intIndex){
		$(this).bind({
			click: function() {
				alert( "Link Index: " + intIndex ); 
			}
		});
	}
);

Ich habe einfach eine "each" Schleife verwendet und dafür gesorgt, dass die "bind" Funktion in einer eigenen Funktion aufgerufen wird, dass ermöglicht es einen Zähler zu setzten (intIndex), welcher auch richtig verwendet wird.