JavaScript

jQueryの.each()でリスト（li）タグの要素数を簡単にカウントする方法

  /

この記事では、jQueryのeach()メソッドを使ってページ内の指定された箇所にあるリスト（li）タグの要素数をカウントし、その結果を表示する方法について詳しく説明します。
簡単に実装できるように、CSS、HTML、JavaScriptのコードを具体例とともに紹介します。

Contents

CSSでのスタイル設定

まず、カウント結果を表示するためのスタイルを設定します。
以下のCSSコードは、リスト要素のカウント結果を表示するためのクラス（.clTxt）や全体のスタイル（.cWrap、.clLiWrap）を定義しています。必要に応じて、スタイルをカスタマイズしてください。

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

liタグの要素数をカウントするJavaScritpの記述

jQueryを使用するには、まずjQueryのライブラリをHTMLファイルに読み込む必要があります。
次に、jQueryの.each()を使ってliタグの要素数をカウントし、カウント結果を表示するためのJavaScriptコードを紹介します。以下のコードでは、ページ読み込み時にリスト要素の数をカウントし、指定した要素に表示します。

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

HTMLでの表示設定

最後に、リスト（li）タグとカウント結果を表示するためのHTMLコードを用意します。以下のHTMLコードでは、カウント結果を表示する要素（class=”clTxt”）とリスト要素を含むコンテナ（.clLiWrap）を設定しています。

<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）タグだけでなく、繰り返しのタグ要素もカウントできそうです。

まとめ

以上のように、jQueryのeach()メソッドを使ってliタグの要素数をカウントし、その結果を表示する方法を紹介しました。この方法を応用すれば、リストタグ以外の要素数も簡単にカウントできます。
この記事で紹介したコードを基に、自分でカスタマイズしてみましょう。例えば、他のHTML要素をカウントしたり、カウント結果を別の方法で表示したりすることもできます。学んだ内容を実際のプロジェクトに応用することで、より深い理解が得られるでしょう。

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

each li リストタグ
関連記事