jQueryを使ってリストの数を数えてみます。

jQueryにはeachメソッドというものが用意されており、これを使うと簡単に処理できます。

eachメソッド

eachメソッドは要素を１つずつ処理します。

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要素を１つずつ処理します。
１個処理するごとにカウンターの数を１ずつ上げていきます。

アラートで要素の数を表示させます。

結果

今回はリスト数が５なので、「5」と表示され、プログラムが正しく動いているのが確認できます。