
jQueryを使ってリストの数を数えてみます。
jQueryにはeachメソッドというものが用意されており、これを使うと簡単に処理できます。
eachメソッド
eachメソッドは要素を1つずつ処理します。
XHTML
<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
<script type="text/javascript"> $(function () { var counter = 0; $('.sample li').each(function () { counter++; }); alert(counter); }); </script>
$(‘.sample li’).each(function () {}でクラス名sampleの中のli要素を1つずつ処理します。
1個処理するごとにカウンターの数を1ずつ上げていきます。
アラートで要素の数を表示させます。