length とは
- ここで説明する length とは次の語句からなる jQuery のプロパティです。
- length
- 読み: レン
意味: 長さ、丈
length プロパティの概要
このプロパティは、要素の個数が何個であるかを取得することができます。
ここで 要素といっているのは HTML の要素だけのことではありません。 配列の要素などもこれに含まれます。
length とは 「 長さ 」 という意味を持つ単語なので、「 個数 」 と聞くと少し意味が違うように感じられますが、 jQuery や JavaScript の length とは個数のことだと思ってください。
構文
サンプルを見る前に構文を確認しておきます。
$(Selector).length;
$(Array).length;
サンプルコードと実行結果 (HTML 要素の個数を取得する)
ここでは、jQuery セレクターで取得した要素群の個数を取得してアラートに表示してみます。
サンプルコード: CSS
<style>
.clsSpan{
background-color: ##lightblue;
border: thin solid ##gray;
margin-right: 1em;
padding: 0 1em;
}
</style>
サンプルコード: HTML
<head>
<style>...</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
< span class ="clsSpan"> SPAN Element < /span>
< span class ="clsSpan"> SPAN Element < /span>
< span class ="clsSpan"> SPAN Element < /span>
<br>
<button id="idButton"> Click </button>
<script>...</script>
</body>
- 06, 07, 08: span class ="clsSpan" (3つの span 要素です。この要素らには同じ class="clsSpan" を設定しています。)
- 10: button id="idButton" (ボタン要素です。この要素がクリックされると script コードの 02 ~ 04 行目が実行されます。)
サンプルコード: script
<script>
$("#idButton").click(function(){
window.alert( $(".clsSpan").length );
});
</script>
- 02-04: $("#idButton").click(function(){ 処理 } (idButton の要素がクリックされると { 処理 } の部分が実行されます。)
- 03: window.alert( $(".clsSpan").length ); (アラートダイアログに clsSpan 要素群の個数を表示します。)
SPAN Element
SPAN Element
SPAN Element
サンプルコードと実行結果 (配列の要素数を取得する)
ここでは、配列を作って その配列の要素数を length で求めてみます。
サンプルコード: HTML
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<script>...</script>
</body>
サンプルコード: script
<script>
let arrStr = $.makeArray(["str1", "str2", "str3", "str4"]);
console.log( $(arrStr).length );
</script>
- 02: arrStr = $.makeArray(["str1", "str2", "str3", "str4"]) (arrStr という配列を作成しています。この配列の要素には "str1" ~ "str4" の 4つの文字列があります。)
- 03: console.log( $(arrStr).length ) (arrStr 配列の要素数をコンソールに表示します。)