デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.lengthjQueryオブジェクトの要素数を取得

構文

jQueryオブジェクトの要素数を取得返値:数値
jQo.lengthver1.0〜

機能

lengthプロパティはjQueryオブジェクトの要素数を取得します。メソッドではないので、後に()を付けないように気を付けましょう。

解説

jQueryオブジェクトを数を取得します

サンプル(length/01.html)を開いてbody内にbutton要素とdiv要素が4つあることを確認して下さい。div要素内にはone,two,three,fourとテキストを設定しています。

<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>

jQueryは以下の様に記述され、buttonをクリックするとdiv要素にマッチしたjQueryオブジェクトにlengthプロパティを利用して要素数を取得しています。取得した数値は変数myNumに代入してアラートで表示します。

$("button").click(function(){
	var myNum = $("div").length;
	alert(myNum)
});

結果として、buttonをクリックするとdiv要素の数である「4」がアラートで表示されます。

メモ

javaScriptのlengthプロパティを拡張

lengthプロパティは元々javaScriptに存在し、文字数のカウントや配列の要素数を取得します。jQueryでは、これらの機能に追加してjQueryオブジェクトの要素数を取得できるようにしてあるのです。ついでなので、ここでjavaScript本来のlengthプロパティの機能を紹介します。

文字数の取得

lengthプロパティを文字列に利用すると、文字列の文字数を返します。サンプル(length/test01.html)を開いてjQueryが以下の様に記述されているのを確認してください。

1行目で変数strに文字列「hello」を代入し、buttonをクリックしたら変数strにlengthプロパティを利用して取得した値をアラートで表示するようにしました。

var str = "hello";
$("button").click(function(){
	var myNum = str.length;
	alert(myNum)
});

buttonをクリックすると「hello」の文字数である5が表示されます。またlengthプロパティは2バイト文字にも対応しています。サンプル(length/test01b.html)を開いて変数strの内容が以下の様に日本語に変更されているのを確認してください。

var str = "こんにちは";

buttonをクリックすると、きちんと文字数の「5」がアラートで表示されます。

配列の要素数を取得

lengthプロパティを配列にも利用すると、要素数を取得します。サンプル(length/test02.html)を開いてjQueryが以下の様に記述されているのを確認してください。

var myArray = [0, 1, 2, 3];
$("button").click(function(){
	var myNum = myArray.length;
	alert(myNum)
});

buttonをクリックすると配列の要素数である4がアラートで表示されます。

ちなみにobjectオブジェクトには利用できません。サンプル(length/test02b.html)を開いて、以下の様に配列ではなくobjectオブジェクトが設定されているのを確認してください。

var myObj = {aaa:10, bbb:20, ccc:30};
$("button").click(function(){
	var myNum = myObj.length;
	alert(myNum)
});

buttonをクリックすると「undefined」となり機能しないことが確認できます。