for(var i=0;...) の i の値を保持するには？

-----
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>

<script type='text/javascript'>
(function(){
var li = document.getElementsByTagName('li');

for(var i=0,max=li.length; i<max; i++){
li[i].onclick = function(){
alert(i);
};
}
})();
</script>
-----

上記スクリプトを実行すると、全てのli要素でクリックしたときに "3" がalertされます。
0,1,2 をそれぞれalertしたいのですが、どういった方法が考えられるでしょうか？

現在作成しているスクリプトでは、下記のようにidに値を保持しています。
もう少しスマートな方法がある気がするのですが…。

---
li[i].id = 'test' + i;
li[i].onclick = function(){
alert(this.id.replace(/^test(\d+)/, '$1'));
};
---

No.1 回答者： babu_baboo 回答日時： 2009/06/22 20:30

(function(){

var li = document.getElementsByTagName('li');

for(var i=0,max=li.length; i<max; i++){
li[i].onclick = (function(i){ return function() {alert(i);};})(i);
}
})();
とか

この回答へのお礼

なるほど！
functionオブジェクトを return したのですね。
私も

li[i].onclick = (function(i){ alert(i); })(i);

までは思いついたのですが、これでは即実行されてしまってどうしたものかと悩んでいました。

変数を定義しなくていいので非常にいい方法だとは思うのですが、コードが長いのが悩みどころです…。
もっとも、慣れれば気にならなくなるようにも思えるので、大きな問題ではないかもしれません。

ともあれ、解決の糸口が見えてほっとしました。
ありがとうございます。

> 補足要求
どのような情報が足りないでしょうか？

お礼日時：2009/06/22 20:51