jQuery｢length｣で要素の数を取得する方法

2020年6月30日

jQueryの「length」は、要素の数が取得する事ができる

今回は、jQueryの「length」について、その使い方をサンプルを交えて解説しよう。

lengthの機能とは？

lengthの機能

lengthは、「文字数や配列やjQueryオブジェクトの数を取得する」事ができる。

lengthは、元々javaScriptの機能であり、その「文字数や配列の要素数」を取得できる機能に加えて、jQueryでは「jQueryオブジェクト」の要素数が取得できるようになっている。

※同様の機能の.size()というメソッドが存在したが、v1.8で非推奨となったので、このlengthを使うようにしよう！

lengthの構文

メソッドの一覧で紹介したlengthだが、厳密にはメソッドではなくプロパティなので、後に()をつけない点に注意しよう。

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

lengthの使い所

lengthは要素の数を確認する事ができる事から、フォームに入力された文字数をカウントしたり、要素が存在するかどうかのチェックに使ったりする。

フォームに入力された文字数をカウントする方法

次のようなテキストエリアのフォームに、ユーザーが入力した「文字数をカウントして表示する」例を見ていこう！

HTML

<textarea id="test-form" rows="5" cols="80"></textarea>
<div>
    <span class="counter">0</span>文字
</div>

jQuery

$(function(){
  $("#test-form").keyup(function(){
    var count = $(this).val().length;
    $(".counter").text(count);
  });
});

この例の仕組みは、文字数をカウントして表示するタイミング（イベント）として.keyup()を使い「キーボードを打ち終わったタイミング」で、文字数を確認して表示するという仕組み。

.keyup()イベント内で、次のようにフォームの値.val()に対してlengthプロパティを適用させる。（$(this)は $("#test-form")を指す）

$(this).val().length;

これを任意の変数countに格納

var count = $(this).val().length;

変数countに格納した文字数を、表示用の.counterに.text()を使ってテキストとして表示させるだけでOK。

$(".counter").text(count);

CodePenで実際の挙動をチェックしてみよう。

See the Pen length by stand4u (@stand4u) on CodePen.

適当に文字を入力してみると、文字数が変わるのが確認できるだろう。

jQueryで特定の要素が「存在するかどうか」を判断する例

前述したように「特定の要素が存在するか」どうかも.lengthを使ってチェックする事ができる。

仕組みとしては「数が1以上＝存在する」というシンプルな方法なので、見ていこう。

jQuery

$(function(){
  if($("#test").length){
        /*＃testが存在する場合の処理*/
   }
});

条件分岐の書き方は、本来であれば「数が1以上」という意味でif( $("#test").length > 0)と書くべきだが、慣例的に省略した記述として、if($("#test").length)という記述でOKなのだ。

フロントエンドスキルをもっと早く・簡単にマスターしたい方へ！

JavaScriptやCSS・Sassなどフロントエンド学習は、初心者が「独学」で完全マスターするには半年以上かかり、相当根気よくやらないと挫折してしまうか、ライバルに出遅れてしまう…。

短期間でフロントエンド・WEBデザインをマスターするには？

私の経験だが、手軽なオンラインスクールを利用した方が圧倒的に早かった。独学だと「何からどこまで勉強すれば良いかわからない」ものを、これだけ学習すればOKというポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが２ヶ月程度でサクッと学べたので逆に経済的だった！（実際に私がオンラインスクールを受講して体感）

では「オススメはどのスクール？」とよく聞かれるのだが、たった１つのおすすめスクールがある訳でなく、その人によって最適なスクールが違う。

スクール選びのポイント