jQueryのsiseを使うと指定したタグ要素がページ内に何個あるか数えることができます。
ページ内にdivタグが何個あるか数えて表示させてみます。
CSSの記述例
※必要に応じて書き換えてください。
<style type="text/css"> body{ font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",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の記述例:divタグをページ内に3つ設定
※必要に応じて書き換えてください。
<h1>下記のdivタグの個数を一番下のspanタグに表示します。</h1> <br> <br> <div>divタグ1</div> <div>divタグ2</div> <div>divタグ3</div> <br> <br> <span></span>
jQueryの記述
※spanタグにdivタグが何個あるのか出力します。
<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>
デモページ
【size】ページ内に指定したタグ要素(divタグ)が何個あるか数えるデモ
※流用される場合は自己責任でお願いします。
デモページ