jQuery API の length は、マッチした要素の数を返すプロパティ。
size()メソッドと、機能的に同じで、同じ値を返す。
戻り値
- Number
要素数。
記述方法
jQuery( セレクター ) . length
「セレクター」にマッチした要素の数を取得する。
記述例
jQuery( '.sample' ) . length
クラス名が「sample」であるDOM要素の数を取得する。
実装例（サンプル）
- 項目１
- 項目２
- 項目３
- 項目４
- 項目５
実装例（サンプル）の動作について
「length」ボタンをクリックすると、ボタンの右横に、「リスト項目数」を表示する。
「length」ボタンを再度クリックすると、元に戻す。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#jquery-sample-button' ) . toggle(
function() {
jQuery( '#jquery-sample-message' ) . text(
'リスト項目数：' + jQuery( '#jquery-sample li' ) . length
);
},
function() {
jQuery( '#jquery-sample-message' ) . text( '' );
}
);
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button' ) . toggle(
function() {
jQuery( '#jquery-sample-message' ) . text(
'リスト項目数：' + jQuery( '#jquery-sample li' ) . length
);
},
function() {
jQuery( '#jquery-sample-message' ) . text( '' );
}
);
} );
// -->
</script>
CSS
<style>
<!--
#jquery-sample-message {
margin-left: 10px;
}
#jquery-sample li {
color: #333333;
list-style-type: square;
}
-->
</style>
<!--
#jquery-sample-message {
margin-left: 10px;
}
#jquery-sample li {
color: #333333;
list-style-type: square;
}
-->
</style>
HTML
<p>
<button id="jquery-sample-button">length</button><span id="jquery-sample-message"></span>
</p>
<ul id="jquery-sample">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
<li>項目４</li>
<li>項目５</li>
</ul>
<button id="jquery-sample-button">length</button><span id="jquery-sample-message"></span>
</p>
<ul id="jquery-sample">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
<li>項目４</li>
<li>項目５</li>
</ul>