JavaScript

jQueryで効率的に要素の数を数える: size()メソッドの使い方と応用例

  /

Web開発の世界では、ページ内の特定の要素がいくつ存在するかを知る必要がしばしばあります。
例えば、ユーザーが動的にコンテンツを追加したときや、特定のタイプの要素をすべて特定のスタイルで装飾したいときなどです。
ここでは、そんな時に役立つjQueryのsize()関数について、その使い方から応用例までを紹介します。

sise()を使うと指定したタグ要素がページ内に何個あるか数えることができるので、ページ内にdivタグが何個あるか数えて表示させてみます。

Contents

jQueryとは？

jQueryは、John Resigによって2006年に開発された、軽量で強力なJavaScriptライブラリです。簡潔な文法でHTMLの操作、イベントハンドリング、アニメーション、Ajaxなどが簡単にできるように設計されています。世界中の多くのWeb開発者に愛用されているこのライブラリは、Web開発の効率を大幅に向上させます。

size()関数の基本

size()関数は、jQueryオブジェクトが保持する要素の数を返します。この関数を使用することで、指定したセレクタにマッチするDOM要素の数を簡単に取得できます。しかし、size()はjQuery 3.0で非推奨となり、.lengthプロパティが推奨されるようになりました。この記事では、size()の使用法と、現在推奨される.lengthプロパティの使用法の両方を解説します。

実践！Webページ内のdivタグの数を数えてみよう

CSSの設定

Webページの見た目を整えるために、次のCSSを用意します。ここでは、divタグに背景色を設定し、中央に配置しています。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
  text-align: center;
}
h1{
  font-size:30px;
  text-align:center;
  font-weight:normal;
  padding:10px 0 0 0;
  position: relative;
}
div{
  width: 400px;
  margin: 0 auto;
  background-color: #000000;
  font-size: 20px;
  font-weight: bold;
  line-height: 2em;
  color: #ffffff;
  margin-bottom: 6px;
}
span{
  font-size:30px;
  font-weight: bold;
}
</style>

HTMLの準備

まずは、数えたい要素を含む簡単なHTMLページを作成します。以下の例では、divタグが3つあり、その数を数えてみせることにします。

<h1>下記のdivタグの個数を一番下のspanタグに表示します。</h1>
<br>
<br>

<div>divタグ1</div>
<div>divタグ2</div>
<div>divタグ3</div>

<br>
<br>
<span></span>

JavaScriptでsize()関数を使う

jquery-2.2.0.min.jsファイルを読み込みます。
最後に、size()関数（または.length）を使って、ページ内のdivタグの数を数え、その結果をspanタグに表示するJavaScriptを書きます

<script src="./jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
  var cnt = $("div").size();
  $("span").text("divタグは「" + cnt + "」個あります。");
});
</script>

　
このコードは、ページが読み込まれた後に実行され、divタグの数を数えてその結果をページ上に表示します。

【size】ページ内に指定したタグ要素(divタグ)が何個あるか数えるデページ

これで、基本的なデモページの準備が整いました。このシンプルな例を通じて、jQueryのsize()関数（及び.lengthプロパティ）を使って、特定のHTML要素の数を数える方法を理解できたはずです。実際にコードを書いて試してみることで、jQueryの便利さと、Webページの要素を操作する力を実感してください。

【size】ページ内に指定したタグ要素(divタグ)が何個あるか数えるデモ

まとめ

jQueryのsize()関数は、特定の条件にマッチするページ内の要素の数を簡単に知ることができる便利な機能です。しかし、現在は.lengthプロパティの使用が推奨されています。この記事を通じて、jQueryを使った基本的なDOM操作の技術を身につけることができました。Web開発の世界では、このような小さな技術が大きな役割を果たすことが多いです。ぜひこの知識を活かして、より魅力的なWebページを作成してください。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

size タグ要素の個数
関連記事