size()を使ってページ内に指定したタグ要素が何個あるか数える方法【jQuery】｜DAD UNION

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

Contents

size()を使ってページ内に指定したタグ要素が何個あるか数えるCSSの記述
size()を使ってページ内に指定したタグ要素が何個あるか数えるHTMLの記述
size()を使ってページ内に指定したタグ要素が何個あるか数えるJavaScriptの記述
【size】ページ内に指定したタグ要素(divタグ)が何個あるか数えるデページ

size()を使ってページ内に指定したタグ要素が何個あるか数えるCSSの記述

※何個あるか数えるdivタグのCSS記述です。必要に応じて書き換えてください。

<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>

size()を使ってページ内に指定したタグ要素が何個あるか数える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>

size()を使ってページ内に指定したタグ要素が何個あるか数えるJavaScriptの記述

※jquery-2.2.0.min.jsファイルを読み込みます。divタグが何個あるのかをspanタグに出力します。

<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>