前提・実現したいこと

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

該当のソースコード

HTML
1            <div class="section1">
2                <ul>
3                    <li class="list"></li>
4                </ul>
5                <button class="more-button"></button>
6            </div>
7            <div class="section2">
8                <ul>
9                    <li class="list"></li>
10                </ul>
11                <button class="more-button"></button>
12            </div>

jQuery
1var moreNum = 2;
2$('.list:nth-child(n + ' + (moreNum + 1) + ')').addClass('is-hidden');
3
4略
5
6$(function () {
7    var list = $('.list').length;
8    alert(list);//2と表示されてしまう。。
9    if (list < moreNum) {
10        $('.more-button').addClass('is-btn-hidden');
11    }
12});

Lhankor_Mhy

2021/10/29 07:02

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

Oheso21

2021/10/29 07:04

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

Lhankor_Mhy

2021/10/29 07:05

2行目もですか？

Oheso21

2021/10/29 07:10

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

js
1var moreNum = 2;
2$('.list:nth-child(n + ' + (moreNum + 1) + ')').addClass('is-hidden');
3
4//略
5
6$(function () {
7  $('.section1,.section2').each(function () {
8    var list = $('.list', this).length;
9    alert(list);//1
10    if (list < moreNum) {
11      $('.more-button', this).addClass('is-btn-hidden');
12    }
13  })
14});

コメントを受けて追記

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

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

js
1var moreNum = 2;
2$('.list:nth-child(n + ' + (moreNum + 1) + ')').addClass('is-hidden');
3
4//略
5
6$(function () {
7  $('.sec').each(function () {
8    var list = $('.list', this).length;
9    alert(list);//1
10    if (list < moreNum) {
11      $('.more-button', this).addClass('is-btn-hidden');
12    }
13  })
14});

コメントを受けて再追記

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

js
1var moreNum = 2;
2$('.list:nth-child(n + ' + (moreNum + 1) + ')').addClass('is-hidden');
3
4//略
5
6$(function () {
7  $('[class^=section]').each(function () {
8    var list = $('.list', this).length;
9    alert(list);//1
10    if (list < moreNum) {
11      $('.more-button', this).addClass('is-btn-hidden');
12    }
13  })
14});