[jQuery] eachでリストの要素数を数える

jQueryを使ってリストの数を数えてみます。
jQueryにはeachメソッドというものが用意されており、これを使うと簡単に処理できます。
eachメソッド
eachメソッドは要素を1つずつ処理します。
XHTML
1 2 3 4 5 6 7 |
<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
1 2 3 4 5 6 7 8 9 |
<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ずつ上げていきます。
アラートで要素の数を表示させます。
結果
今回はリスト数が5なので、「5」と表示され、プログラムが正しく動いているのが確認できます。
関連記事
- [jQuery] 背景の色を変更する方法
- [JQuery] Ajaxが使える状態かどうかチェックする方法
- [jQuery] クリックされたリストの番号やテキストを取得する方法
- [jQuery] 配列を取り出して任意の形で表示する each() append()
- [JavaScript] 現在のURLやパラメタを取得する方法(Location)