jQueryのeachを使ってページの指定箇所内にあるリスト(li)タグの要素数をカウントし、カウント数を表示する方法をご紹介します。
Contents
liタグの要素数をカウント表示するCSS記述
※リスト(li)タグの要素数出力先(.clTxt)のCSS記述です。必要に応じて変更して下さい。
<style type="text/css"> <!-- .cWrap{ width:900px; margin:0 auto; } .clLiWrap{ width:220px; margin:0 auto; text-align:left; } .clTxt{ font-weight:bold; padding:5px 0; } --> </style>
jQueryの.each()でliタグ要素数をカウントし、カウント結果を出力するJavaScritpの記述
※.each()でliタグ要素数をカウントし、カウント結果をclass=”clTxt”に出力してます。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"><br /> <!-- $(function() { var cnt=0; $(".clLiWrap li").each(function() { ++cnt; }); $(".clTxt").text("リストタグの要素数は"+cnt+"です。"); }); // --> </script>
liタグの要素数をカウント表示するHTMLの記述
※リスト(li)タグと要素数出力先(class=”clTxt”)を用意します。必要に応じて変更して下さい。
<div class="clTxt"></div> <div class="clLiWrap"> <ul> <li><a href="https://dad-union.com/javascript/69">jQueryを使って複数画像をフェードインフェードアウトで切替表示</a></li> <li><a href="https://dad-union.com/javascript/63">iscroll.js:スマホサイトで上下固定バーを実装してみる</a></li> <li><a href="https://dad-union.com/javascript/75">マウスオーバー・アウトで画像サイズを伸縮表示して見る</a></li> <li><a href="https://dad-union.com/javascript/60">jquery.jscrollpane.min.js:スクロールバーをカスタムするjs</a></li> <li><a href="https://dad-union.com/javascript/57">getJSONでjson形式の配列情報を取得表示する方法</a></li> </ul> </div> <!--/clLiWrap-->
jQueryのeachを使ってタグの要素数をカウント表示したページ
jQueryのeachを使ってタグの要素数をカウント表示したページデモ
リスト(li)タグだけでなく、繰り返しのタグ要素もカウントできそうです。
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告