jQueryで要素の数を取得(カウント)するlengthプロパティの使い方【jQuery】

今回はリスト内の要素の数や、特定の要素内にある要素の数を取得するlengthプロパティの使い方を解説していきます。静的なページでは利用する機会は多くありませんが、CMSのような動的なコンテンツの場合は使い方を知っておくと便利です。

lengthプロパティについて

lengthプロパティは、元々Javascriptで用意されている、文字列の長さや配列内の要素数を取得できるプロパティです。jQueryでは、Javascriptのlengthプロパティを拡張し、jQueryのオブジェクト数を取得できるようになっています。

lengthプロパティの基本的な使い方は以下の通りです。

$("セレクタ").length;

lengthプロパティはメソッドではありませんので後ろに()は必要ありません。
また、lengthプロパティと同じようなsizeというメソッドがありましたが、現在は廃止となっていますので注意してください。

それでは、このlengthプロパティを使用した要素の数を取得する方法をパターン別に解説していきます。

リスト(ul)内の子要素(li)の数を取得する

まずは、以下のHTMLでulタグ内のliの数を取得してみます。

<ul>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
</ul>

$(function(){
    var list = $("ul li").length;
    alert(list);
    // 「5」と表示される
});

lengthプロパティを使用し、指定されたHTMLタグulの中にあるliの数を取得しています。alertで表示すると「5」と表示されます。

特定のクラス内のpタグの数を取得する

続いて、特定のクラス内にある特定のHTMLタグの数を取得します。

<div class="content">
    <p>pタグ</p>
    <span>spanタグ</span>
    <p>pタグ</p>
    <a hrf="#">リンク</a>
    <p>pタグ</p>
</div>

$(function(){
    var ptag = $(".content p").length;
    alert(ptag);
    // 「3」と表示される
});

上記のように、特定のクラス内にある、特定のHTMLタグやクラスの数の取得も可能です。
※idでの指定も可能です。

特定の要素の子要素数を取得する

最後に、特定の要素内にある全ての子要素の数を取得してみます。
子要素のHTMLタグは全て別々のタグとします。

<div class="content">
    <p>pタグ</p>
    <span>spanタグ</span>
    <a hrf="#">リンク</a>
    <div>divタグ</div>
    <h2>h2タグ</h2>
</div>

$(function(){
    var children= $(".content").children().length;
    alert(children);
    // 「5」と表示される
});

このように、数を数える親要素の特定のみとして、数を数える子要素はchildrenメソッドで全ての子要素を対象として取得可能となります。

jQueryのlengthプロパティで数を数えた際に、指定の要素数が「0」の場合は、そのまま「0」を返します。
そのため、要素の存在のチェックには向きませんが、存在チェックをするのであればif文などで「>0」としてあげてください。

さいごに

いかがでしたでしょうか。
今回はjQueryで要素の数を数えるlengthプロパティを解説しました。使用する場面はたまにありますので、lengthプロパティの使い方を知っておくと便利です。