【jQuery】同じ機能を異なるグループごとに機能させたい

Question

前提・実現したいこと

タイトルが適切ではないかもしれませんが、
「もっと見る」ボタンを一つのテンプレートに複数実装しています。
リストが規定の数(ここでは２)より少なけれな、ボタンを非表示にする実装をしたいのですが、そのテンプレ内にある全リストの数を取得してしまっているので、グループごとに取得させたいです。

該当のソースコード

            <div class="section1">
                <ul>
                    <li class="list"></li>
                </ul>
                <button class="more-button"></button>
            </div>
            <div class="section2">
                <ul>
                    <li class="list"></li>
                </ul>
                <button class="more-button"></button>
            </div>

var moreNum = 2;
$('.list:nth-child(n + ' + (moreNum + 1) + ')').addClass('is-hidden');

略

$(function () {
    var list = $('.list').length;
    alert(list);//2と表示されてしまう。。
    if (list < moreNum) {
        $('.more-button').addClass('is-btn-hidden');
    }
});

Comments

[Lhankor_Mhy]

.item は .list の子のようなイメージですか？

[Oheso21]

すみません、.listが正しいです。ご指摘ありがとうございます。

[Lhankor_Mhy]

2行目もですか？

[Oheso21]

そのようです、すみません。
ちなみに、実際のclass名より簡略化したものを記載しており、class名の不一致により動作していないわけではなさそうです。

Answer 1

each とコンテキストを使うといいかもしれないです。

var moreNum = 2;
$('.list:nth-child(n + ' + (moreNum + 1) + ')').addClass('is-hidden');

//略

$(function () {
  $('.section1,.section2').each(function () {
    var list = $('.list', this).length;
    alert(list);//1
    if (list < moreNum) {
      $('.more-button', this).addClass('is-btn-hidden');
    }
  })
});

---

コメントを受けて追記

100個あった場合の書き方がわかるといいなと思います。

100個でも大丈夫ですよ。サンプル置いときますね。
https://jsfiddle.net/Lhankor_Mhy/cnvu8xp2/

var moreNum = 2;
$('.list:nth-child(n + ' + (moreNum + 1) + ')').addClass('is-hidden');

//略

$(function () {
  $('.sec').each(function () {
    var list = $('.list', this).length;
    alert(list);//1
    if (list < moreNum) {
      $('.more-button', this).addClass('is-btn-hidden');
    }
  })
});

---

コメントを受けて再追記

共通クラスをつけたくないってことなのかな……？
セレクタは適当に調整してください。
https://jsfiddle.net/Lhankor_Mhy/cnvu8xp2/1/

var moreNum = 2;
$('.list:nth-child(n + ' + (moreNum + 1) + ')').addClass('is-hidden');

//略

$(function () {
  $('[class^=section]').each(function () {
    var list = $('.list', this).length;
    alert(list);//1
    if (list < moreNum) {
      $('.more-button', this).addClass('is-btn-hidden');
    }
  })
});

Comments

[Oheso21]

ありがとうございます。この方法も素晴らしいと思うのですが、100個あった場合の書き方がわかるといいなと思います。

[Lhankor_Mhy]

その時には共通のクラスをつければいいと思いますよ。

[Oheso21]

多分、お伝えの仕方が悪かったと思うのですが、.section1, .section2...が100個あった場合、どのような書き方になるのかな、と思いました。

[Lhankor_Mhy]

追記しました。

[Oheso21]

できました！ありがとうございますmm

[Lhankor_Mhy]

再追記しました。

[Oheso21]

グループごとにナンバリングされることを想定して、'[class^=section]'の方がより理想のお答えです。
ありがとうございます！

[Lhankor_Mhy]

お役に立てたようで何よりです