size()

jQuery API の size() は、マッチした要素の数を返すメソッド。

lengthプロパティと、機能的に同じで、同じ値を返す。

jQuery Version 1.8」の時点で非推奨になった。
length プロパティで代替できる。

戻り値

Number

要素数。

記述方法

jQuery( セレクター ) . size()

「セレクター」にマッチした要素の数を取得する。

記述例

jQuery( '.sample' ) . size()

クラス名が「sample」であるDOM要素の数を取得する。

実装例(サンプル)

  • 項目1
  • 項目2
  • 項目3
  • 項目4
  • 項目5

実装例(サンプル)の動作について

「size()」ボタンをクリックすると、ボタンの右横に、「リスト項目数」を表示する。

「size()」ボタンを再度クリックすると、元に戻す。

実装例(サンプル)のソースコード

JavaScript

<script type="text/javascript">
<!--
jQuery( function() {
    jQuery( '#jquery-sample-button' ) . toggle(
        function() {
            jQuery( '#jquery-sample-message' ) . text(
                'リスト項目数:' + jQuery( '#jquery-sample li' ) . size()
            );
        },
        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>

HTML

<p>
    <button id="jquery-sample-button">size()</button><span id="jquery-sample-message"></span>
</p>
<ul id="jquery-sample">
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
    <li>項目4</li>
    <li>項目5</li>
</ul>

スポンサード リンク

カテゴリー: API, DOM要素メソッド, JavaScript, jQuery, その他諸々 タグ: , パーマリンク