jQueryを使ってリストの数を数えてみます。
jQueryにはeachメソッドというものが用意されており、これを使うと簡単に処理できます。
eachメソッド
eachメソッドは要素を１つずつ処理します。
XHTML
|
0 1 2 3 4 5 6 7 8 |
<ul class="sample"> <li>aaa</li> <li>bbb</li> <li>ccc</li> <li>ddd</li> <li>eee</li> </ul> |
HTMLはulとliを使ったシンプルなリストになります。ulのクラス名はsampleに設定します。
表示
- aaa
- bbb
- ccc
- ddd
- eee
HTMLを表示するとこのようになります。
jQuery
|
0 1 2 3 4 5 6 7 8 9 10 |
<script type="text/javascript"> $(function () { var counter = 0; $('.sample li').each(function () { counter++; }); alert(counter); }); </script> |
$(‘.sample li’).each(function () {}でクラス名sampleの中のli要素を１つずつ処理します。
１個処理するごとにカウンターの数を１ずつ上げていきます。
アラートで要素の数を表示させます。
結果
今回はリスト数が５なので、「5」と表示され、プログラムが正しく動いているのが確認できます。
