jQuery で簡易無限スクロール

「もっと見る（さらに見る）」ボタンをクリックする毎に決まった件数の記事を表示する。Ajaxじゃないなんちゃって簡単無限スクロール版。

JQuery

最初に表示しておく数とクリック毎に表示する数を別々に指定

var show = 6; // 最初に表示する件数
var moreNum = 3;  // クリック毎に表示する件数
var newsItem = '#js-news-list li';
$(newsItem + ':nth-child(n + ' + (show + 1) + ')').addClass('is-hidden');
$('.more').on('click', function(e) {
	e.preventDefault();
	$(newsItem + '.is-hidden').slice(0, moreNum).removeClass('is-hidden');
	if ($(newsItem + '.is-hidden').length == 0) {
		$('.more').fadeOut();
	}
});

最初に表示しておく数 = 表示する数

var moreNum = 3;
$('#js-news-list li:nth-child(n + ' + (moreNum + 1) + ')').addClass('is-hidden');
$('.more').on('click', function(e) {
	e.preventDefault();
	$('#js-news-list li.is-hidden').slice(0, moreNum).removeClass('is-hidden');
	if ($('#js-news-list li.is-hidden').length == 0) {
		$('.more').fadeOut();
	}
});

CSS

.news-list {
	display: grid;
	gap: 30px;
}
@media screen and (min-width: 768px), print {
.news-list  {
		grid-template-columns: repeat(3, 1fr);
	}
}
.news-list li {
	opacity: 1;
	animation-name: displayContent; /* ふわっと表示させる場合 */
	animation-duration: 1s; /* ふわっと表示させる場合 */
	animation-fill-mode: forwards; /* ふわっと表示させる場合 */
}
.news-list li.is-hidden {
	opacity: 0; /* ふわっと表示させる場合 */
	display: none;
	height: 0;
	margin: 0;
}
.more {
	text-decoration: none;
	color: #fff;
	display: block;
	text-align: center;
	width: 20em;
	margin: 3em auto 0;
	background-color: skyblue;
	padding: 1em 2em;
}
@keyframes displayContent { /* ふわっと表示させる場合 */
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
		

HTML

<ul id="js-news-list" class="news-list">
	<li>
		<a href="#">
			<img src="thumb.png" alt="">
			<time datetime="2022-08-01">2022.05.01</time>
			<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストテキストテキストテキストテキストテキストテキ</p>
		</a>
	</li>
	<li>
		<a href="#">
			<img src="thumb.png" alt="">
			<time datetime="2022-08-01">2022.05.01</time>
			<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストテキストテキストテキストテキストテキストテキ</p>
		</a>
	</li>
	...
</ul>
<a href="#" class="more">さらに表示する</a>