2010/08/10

[jQuery]$().each(function(index,Element){})について

jQueryのeachメソッドについて少し調べました。

ぐぐってもすぐにいい答えにたどり着けなかったので、jQueryリファレンスの.each()で確認しました。

やはり、予想通り、ループをするメソッドでした。

さっそく、こんなプログラムを用意しました。

<html>
<head>
<title>Jquery.eachテスト</title>
<script type="text/javascript" 
  src="./jquery-1.4.2.min.js"
></script>
<script>
function lf_Run(){
  $('li').each(function(index) {
    alert(index + ': ' + $(this).text());
  });
}
</script>
</head>
<body>
<ul>
  <li>foo</li>
  <li>bar</li>
  <li>hoge</li>
</ul>
<input type="button"
  value="Run"
  onclick="lf_Run();"
>
</body>
</html>

「Run」ボタンを押すと処理が走るのですが、具体的には、liタグ全体を$('li')でキャッチし、各liタグの要素をeachメソッドで取り出しています。
(上記の場合、3回実行されます。)
かつ、その際に、lambdaの第一引数を設定すると、indexを取得することができるみたいです。
(先頭の番号は、0)

実行結果は、このようになります。
0:foo
1:bar
2:hoge


ここで、リファレンスを読んでみると、第二引数も設定できるみたいなので、その場合のプログラムも作ってみました。
<html>
<head>
<title>Jquery.eachテスト</title>
<script type="text/javascript"
src="./jquery-1.4.2.min.js"
></script>
<script>
function lf_Run(){
$('li').each(function(index,domEle) {
alert(index + ': ' + $(domEle).text());
});
}
</script>
</head>
<body>
<ul>
<li>foo_</li>
<li>bar_</li>
<li>hoge_</li>
</ul>
<input type="button"
value="Run"
onclick="lf_Run();"
>
</body>
</html>

第二引数で、各liタグの要素をゲットできるみたいです。
(最初に紹介したプログラムと同様に3回ループされます。)

実行結果は、このようになります。
0:foo_
1:bar_
2:hoge_

このメソッドのリファレンスを読んでいて思ったのは、schemeをやってよかったということ。

実際、schemeでeachを実装する機会が多々あるので、そこで慣れておくと、この手のメソッドの予想がつくので、抵抗なく受け入れることができるんですね。

よかった。よかった。

時刻: 13:07
ラベル:

0 コメント:

コメントを投稿

登録: コメントの投稿 (Atom)