lengthは、主に文字列の長さや配列の要素数を取得することができるプロパティである。
元々javaScriptの機能であり、その「文字数や配列の要素数」を取得できる機能に加えて、jQueryでは「jQueryオブジェクト」の要素数が取得できるようになっている。
lengthは要素の数を確認する事ができる事から、フォームに入力された文字数をカウントしたり、要素が存在するかどうかのチェックに使ったりする。
$("セレクタ").length
フォームに入力された文字数をカウントする方法
以下の例は、テキストエリアのフォームに、ユーザーが入力した「文字数をカウントして表示する」処理である。
<textarea id="test-form" rows="5" cols="80"></textarea>
<div>
<span class="counter">0</span>文字
</div>
$(function(){
$("#test-form").keyup(function(){
//フォームの値.val()に対してlengthプロパティを適用
var count = $(this).val().length;
//変数countに格納した文字数を、表示用の.counterに.text()を使ってテキストとして表示させる
$(".counter").text(count);
});
});
文字数をカウントして表示するタイミング(イベント)として.keyup()を使い「キーボードを打ち終わったタイミング」で、文字数を確認して表示している。
jQueryで特定の要素が「存在するかどうか」を判断する例
前述したように「特定の要素が存在するか」どうかも.lengthを使ってチェックする事ができる。
仕組みとしては「数が1以上=存在する」というシンプルな方法である。
$(function(){
if($("#test").length){
/*#testが存在する場合の処理*/
}
});