要素の個数をカウントで判定＋残りをクリック表示する方法【jQuery】

2023.06.02

「要素が○○個以上の場合は～」という処理をjqueryで行う方法を解説したいと思う。

また、今回は試しに下記の要件で実装を行う。

  • ①カテゴリーが全部で30個ある想定
  • ②最初に表示させておくのは10個まで
  • ③ボタンで全表示可能にしておく

完成時のイメージは下記のような形になるので、デザイン等は必要最低限に抑えたうえで実装を行いたいと思う。

See the Pen Untitled by Tomizawa (@masaya_coding) on CodePen.

jQueryでこれらの個数判定を行っていくが、他の作業にも応用可能なので、ぜひ知っておいてほしい。

Table of Contents

HTMLでフロント資材作成

html側の作業は至ってシンプルで、下記のコードで事足りる（今回はjsメインなのでheadなどは必要最低限に絞る）。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
	<script src="https://t-creative-works.com/js/jquery-3.5.0.min.js"></script>
</head>
<body>
    <div class="category">
        <ul class="cat_list">
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
            <li>07</li>
            <li>08</li>
            <li>09</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
            <li>16</li>
            <li>17</li>
            <li>18</li>
            <li>19</li>
            <li>20</li>
            <li>21</li>
            <li>22</li>
            <li>23</li>
            <li>24</li>
            <li>25</li>
            <li>26</li>
            <li>27</li>
            <li>28</li>
            <li>29</li>
            <li>30</li>
        </ul>
        <div class="cat_open">
            <p>残りのカテゴリー数(<span class="cat_numb"></span>)</p>
        </div>
    </div>
</body>
</html>

ちなみに、「cat_open」は残りのカテゴリーを表示するだけでなく、クリックするとすべてのカテゴリを表示できるようになっている。

CSSで最低限のデザインを整える

次はCSSだが、なくても動作するので無駄と感じる場合は飛ばしてもらってもオッケー

.category .cat_list {
	font-size: 16px;
}
.category .cat_list li {
	display: inline-block;
	padding: 6px 8px;
	background-color: #0067c0;
	border-radius: 4px;
	margin-right: 9px;
	margin-bottom: 8px;
	font-weight: normal;
	color: #ffffff;
}
.category .cat_open {
	margin-top: 10px;
	color: #0067c0;;
	cursor: pointer;
	width: fit-content;
}
@media screen and (max-width: 750px) {
	.category .cat_list {
		font-size: 3.73333vw;
	}
	.category .cat_list li {
		border-radius: 1.06667vw;
		margin-bottom: 2.66667vw;
		margin-right: 1.2vw;
		padding: 0.8vw 1.0666vw;
	}
}

jQueryで数をカウント＋判定＋クリック処理

jsは一旦全て載せるので、下記を移植すれば問題なく動作する。

const cat_count = $('.cat_list').children().length;
const opener = $('.cat_open');
//カテゴリー表示
$(function() {
	if (cat_count > 10) {
		const cat_count_before = cat_count - 10;
		$(".cat_numb").html(cat_count_before);
		cat_list_next = $('.cat_list li:nth-of-type(n+10)');
		cat_list_next.nextAll().css({
			display: 'none',
		});
		click_act();
	}
	//スマホ時の処理(数の指定以外は上記と同じ)
	if (window.matchMedia('(max-width: 768px)').matches) {
		if (cat_count > 5) {
			const cat_count_before_sp = cat_count - 5;
			$(".cat_numb").html(cat_count_before_sp);
			cat_list_next = $('.cat_list li:nth-of-type(n+5)');
			cat_list_next.nextAll().css({
				display: 'none',
			});
			click_act();
		}
	}
	//クリック時のアクションを関数化
	function click_act(){
		opener.click(function() {
			cat_list_next.nextAll().css({
				display: 'inline-block',
			});
			const cat_count_after = 0;
			$(".cat_numb").html(cat_count_after);
		});
	}
});

ここからは上記のjsの説明を三段階に分けて行う。

すべてのカテゴリーとオープンボタンを変数化

まずは全てのカテゴリーとボタンの各要素を変数としてまとめておきたい。

//すべてのカテゴリーと（）の中身を変数に
const cat_count = $('.cat_list').children().length; //cat_listの子要素達（li）を全部取得
const opener = $('.cat_open'); //オープンブタン

今回は基本的にこの二つの変数を用いて処理を行っていく。

カテゴリーの表示数などを設定

コメントアウト部分に記載している通りだが、「cat_count」という変数を基に10個以上の場合、以下の場合、残りのカテゴリーは表示するか否かなどの処理を行っている。

//カテゴリー表示
$(function() {
	if (cat_count > 10) {//10個以上のカテゴリーがある場合は非表示に設定
		const cat_count_before = cat_count - 10;　//すべてのカテゴリーから10引いた数を変数に
		$(".cat_numb").html(cat_count_before); //10引いた数を「残りのタグ」として表示
		cat_list_next = $('.cat_list li:nth-of-type(n+10)'); //10個目以降のカテゴリーを変数に
		//↑constなどの宣言を行わないので、グローバル変数としclick_act()関数などにも応用できる
		cat_list_next.nextAll().css({ //10個目以降のカテゴリーはnextAllメソッドで全部非表示
			display: 'none',
		});
		click_act(); //クリック時のアクションを巻子から呼び出し
	}
	if (window.matchMedia('(max-width: 768px)').matches) {//スマホ時の処理(数の指定以外は上記と同じ)
		if (cat_count > 5) {
			const cat_count_before_sp = cat_count - 5;
			$(".cat_numb").html(cat_count_before_sp);
			cat_list_next = $('.cat_list li:nth-of-type(n+5)');
			cat_list_next.nextAll().css({
				display: 'none',
			});
			click_act();
		}
	}
//以下省略
});

中でも注意してもらいたいのは10個目以降のカテゴリーを疑似クラス:nthを使って「cat_list_next」という変数にしていることだ。

これにより次のブロックでは10個目以降のカテゴリーは兄弟要素を取得する「nextAll()」と「.css」を使ってdisplay:none;で非表示になるように設定されている。これは次の変数は次のセクションでも使用するので覚えておいてほしい。

説明したい内容が多いので、大まかな概要は下記のリストを参考にしてみてほしい。

  • ・4行目の変数「cat_count_before」＝全てのカテゴリーから-10引いた数（残りのカテゴリー）をセット
  • ・上記をさらに「$(“.cat_numb”).html(cat_count_before);」でhtmlに表示
  • ・13行目以降に登場する二つ目のif文はSP時には10個ではなく5個にするという分岐（あっても無くてもオッケー）
  • ・12、23行目の「click_act();」は後に説明する関数を実行

ボタンクリック時のアクションを設定

ここまででほぼ全ての導線が出来上がったので、残りはボタンクリック時のイベントを発火させるのみとなる。

以下の処理は「click_act()」という関数にしてあるので、先ほどのif文(11行目)で呼び出して使う形になる。

//クリック時のアクションを関数化
function click_act(){
	opener.click(function() { //クリックで全表示
		cat_list_next.nextAll().css({
			display: 'inline-block', //10個目以降のカテゴリーを表示
		});
		const cat_count_after = 0;　//カテゴリーの個数を見えるか
		$(".cat_numb").html(cat_count_after);
	});
}

一番最初に作った変数（const opener = $(‘.cat_open’);）をクリックしたら、10個目以降の要素を入れてある変数cat_list_nextが「nextAll()」と「.css」によってdisplay:block;に切り替わる。

残りのカテゴリーに関しては、クリック前はcat_count_beforeという変数を媒体に数字を表示していたが、クリック後はcat_count_beforeという変数（実質0個）をhtmlに上書きしている。

これで動作は自体は可能なので、PCとSPで確認してみてもらいたい。このコードは様々な案件に応用できるので、ぜひ応用してみてもらいたい。

関連記事

PIC UP