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

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ずつ上げていきます。

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

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



Author: webmaster