「もっと見る」を複数の要素に追加したい

Question

前提・実現したいこと

「もっと見る」を複数の要素に追加したいです。

「もっと見る」が「a.link」3つ以上要素があれば表示されるようにしたいのですが
上手く動作しませんでした。

どなたかわかる方がおりましたらお手数をおかけし申し訳ございませんが教えていただけないでしょうか

発生している問題・エラーメッセージ

「もっと見る」ボタンが設定した要素の数で上手く消えてくれませんでした

該当のソースコード

<div class="link">
	<div class="link_wrap">
		<a href="" class="link">テキスト</a>
		<a href="" class="link">テキスト</a>
		<a href="" class="link">テキスト</a>
		<a href="" class="link">テキスト</a>
		<a href="" class="link">テキスト</a>
	</div>
	<div class="more">
		<p class="btn">もっと見る</p>
	</div>
</div>
<div class="link">
	<div class="link_wrap">
		<a href="" class="link">テキスト</a>
		<a href="" class="link">テキスト</a>
		<a href="" class="link">テキスト</a>
	</div>
	<div class="more">
		<p class="btn">もっと見る</p>
	</div>
</div>
<div class="link">
	<div class="link_wrap">
		<a href="" class="link">テキスト</a>
		<a href="" class="link">テキスト</a>
	</div>
	<div class="more">
		<p class="btn">もっと見る</p>
	</div>
</div>

<style>
.hidden {
    opacity: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
} 
</style>
<script>
$(document).ready(function() {
	var num = 3;
	$('.link_wrap a:nth-child(n + ' + (num + 1) + ')').addClass('hidden');
	$('.more').on('click', function() {
	  $(this).prev().children('a.hidden').slice(0, num).removeClass('hidden');
	  if ($(this).prev().children('a.hidden').length == 1) {
	    $(this).hide();
	  }
	});

	$('.link_wrap a').each(function(index) {
		if (index > num) {
			$(this).parent().next('.more').hide();
		}
	});

});

Comments

[yambejp]

＞「a.link」3つ以上要素があれば表示されるようにしたい

３つ表示したいなら4つ以上ですよね？
下の２つの「.link_wrap」は３つ以下なのでmoreが表示されない
のが正しいと思いますが？

[pontas]

ご指摘ありがとうございます。
ループがどうやら「.link_wrap a」をすべて取得している為、
表示されている上から数えているようです
なので要素を増やしても正しく表示されない状況です

Answer 1

<script>
$(function(){
  var num = 3;
  $('.link_wrap').each(function(){
    $('a:gt('+(num-1)+')',this).hide();
  });
  $('.more').hide();
  $('a:hidden').closest('.link_wrap').next('.more').show();
  $('.btn').on('click',function(){
    $(this).closest('.more').prev('.link_wrap').find('a').show();
    $(this).hide();
  });
});
</script>
<div class="link">
    <div class="link_wrap">
        <a href="" class="link">テキスト11</a>
        <a href="" class="link">テキスト12</a>
        <a href="" class="link">テキスト13</a>
        <a href="" class="link">テキスト14</a>
        <a href="" class="link">テキスト15</a>
    </div>
    <div class="more">
        <p class="btn">もっと見る</p>
    </div>
</div>
<div class="link">
    <div class="link_wrap">
        <a href="" class="link">テキスト21</a>
        <a href="" class="link">テキスト22</a>
        <a href="" class="link">テキスト23</a>
        <a href="" class="link">テキスト24</a>
    </div>
    <div class="more">
        <p class="btn">もっと見る</p>
    </div>
</div>
<div class="link">
    <div class="link_wrap">
        <a href="" class="link">テキスト31</a>
        <a href="" class="link">テキスト32</a>
    </div>
    <div class="more">
        <p class="btn">もっと見る</p>
    </div>
</div>

Comments

[pontas]

ありがとうございます！
無事、正常な挙動が確認できました
本当にありがとうございました。

Answer 2

jqueryは読み込まれていますか？
$(document).ready(function() を使うのであればjqueryの読み込みが必要です。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Comments

[pontas]

ご連絡ありがとうございます。
はい読み込んでます