jQueryの.each()を使ってリスト（li）タグの要素数をカウント表示する方法｜DAD UNION

jQueryのeachを使ってページの指定箇所内にあるリスト（li）タグの要素数をカウントし、カウント数を表示する方法をご紹介します。

Contents

liタグの要素数をカウント表示するCSS記述
jQueryの.each()でliタグ要素数をカウントし、カウント結果を出力するJavaScritpの記述
liタグの要素数をカウント表示するHTMLの記述
jQueryのeachを使ってタグの要素数をカウント表示したページ

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