【jQuery】リストの数が動的に変わるとき、ボタンの表示・非表示を切り替える

どうも、くまだです。

Webサイト制作で例えば「タグの数やリストの数が増えたり減ったりしたときに、タグの数が増えたらボタンを表示し、タグの数が少ないときはボタンを非表示にしたい」というときあると思います。（あるかな….）

ゼロから私が実装したわけではなく、ググって見つけたものなので、こういうやり方もあるよ～という紹介みたいなものです。

リストやタグだけでなく、アイキャッチが動的に増えるところでも使えます。

リストの数でボタンの表示・非表示を切り替える

仕様としては以下のような動きです。

タグの数が動的に増えたり減ったりする想定です。

タグの数が少ない（例:3個まで）ときはボタンは非表示。タグの数が多いとき（例:4個以上）のときはボタンを表示させる、という感じです。

コードは以下のとおりです。

〇HTML

  <ul class="tag-items">
    <li class="tag-items__item">タグ</li>
    <li class="tag-items__item">タグ</li>
    <li class="tag-items__item">タグ</li>
    <li class="tag-items__item">タグ</li>
  </ul>

  <button id="js-more">もっとみる</button>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="main.js"></script>
</body>

〇jQuery

$(function () {
  const list = '.tag-items__item:nth-of-type(n+4)';
  $(list).hide();
  $('#js-more').click(function () {
    $(list).toggle();
    if ($(list).css('display') == 'none') {
      $('#js-more').text('もっと見る');
    } else {
      $('#js-more').text('閉じる');
    }
    return false;
  });

  const num = $('.tag-items').children('li').length;
  if (num < 4) {
    $('#js-more').hide();
  };
});

変数 listでliタグの数を取得しています。nth-of-type(n+4)がliタグの4つ目以降を示して、$(list).hide();で4つ目以降を非表示にしています。

ボタンをクリックしたら、toggleメソッドで表示・非表示切り替え。さらに以下の部分で、listにcssのdisplay: none;が当たっていたら、ボタンのテキストが「もっと見る」、当たっていなかったら「閉じる」にテキストを書き換えます。

   if ($(list).css('display') == 'none') {
        $('#js-more').text('もっと見る');
      } else {
        $('#js-more').text('閉じる');
      }
      return false;

タグの数が少ないときはボタンを非表示にするところは下記の部分です。

  const num = $('.tag-items').children('li').length;
  if (num < 4) {
    $('#js-more').hide();
  };

ulの子要素のliの数をlengthプロパティで取得して変数に格納。

liの数が4つ以下であればボタンは非表示にする、という感じです。

以上、短いですがこんなところです。タグの数を初期状態でもっと多く表示させたいなら、nth-of-typeの数字をいじればいいです。

タグの数や、例えばサムネイル（アイキャッチ画像など）の数が動的に変化する部分で、ボタンを表示・非表示切り替えたいときはけっこう便利です（案件で実証済み）

ここまで読んでくださりありがとうございました。