もっと見るで徐々に見せるスクリプト

.contents内の要素をもっと見るボタンを実装して、徐々に（５件ずつ）見せていきたいのですが。今のところもっと見る→全件が表示されていまいます。
この場合は何を付け加えれば、５件ずつの見せれる様になるのでしょうか。
よろしくお願いいたします。

html
1<script>
2$(function(){
3  $('.contents:gt(4)').hide();
4  $('.contents:eq(4)').after($('<p>≫ もっと見る</p>').on('click',function(){
5    $('.contents').show();
6    $(this).remove();
7  }));
8});
9</script>
10<div id="inner">
11<p class="contents">1</p>
12<p class="contents">2</p>
13<p class="contents">3</p>
14<p class="contents">4</p>
15<p class="contents">5</p>
16<p class="contents">6</p>
17<p class="contents">7</p>
18<p class="contents">8</p>
19<p class="contents">9</p>
20<p class="contents">10</p>
21<p class="contents">11</p>
22<p class="contents">12</p>
23<p class="contents">13</p>
24</div>

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

回答3件

HTML
1<script>
2$(function() {
3  const NEXT = 5;
4  const contents = $(".contents");
5  const more = $("#more");
6  let offset = 0;
7  more.on("click", function() {
8    const limit = offset + NEXT
9    contents.slice(offset, limit).show();
10    offset = limit
11    if (contents.length <= limit) more.remove();
12  }).click();
13});
14</script>
15
16<div id="inner">
17  <p class="contents">1</p>
18  <p class="contents">2</p>
19  <p class="contents">3</p>
20  <p class="contents">4</p>
21  <p class="contents">5</p>
22  <p class="contents">6</p>
23  <p class="contents">7</p>
24  <p class="contents">8</p>
25  <p class="contents">9</p>
26  <p class="contents">10</p>
27  <p class="contents">11</p>
28  <p class="contents">12</p>
29  <p class="contents">13</p>
30</div>
31<p id="more">≫ もっと見る</p>

CSS
1.contents {
2  display: none;
3}

投稿2018/12/25 05:22

root_jp

総合スコア4666

javascript
1<script>
2$(function(){
3  var v=5;
4  $('.contents').hide();
5  $(document).on('click',$('.more'),function(){
6    $('.contents:hidden:lt('+v+')').show();
7    $('.more').remove();
8    if($('.contents:hidden').length>0){
9      $('.contents:visible:last').after($('<p class="more">≫ もっと見る</p>'));
10    }
11  }).trigger('click');
12});
13</script>
14<div id="inner">
15<p class="contents">1</p>
16<p class="contents">2</p>
17<p class="contents">3</p>
18<p class="contents">4</p>
19<p class="contents">5</p>
20<p class="contents">6</p>
21<p class="contents">7</p>
22<p class="contents">8</p>
23<p class="contents">9</p>
24<p class="contents">10</p>
25<p class="contents">11</p>
26<p class="contents">12</p>
27<p class="contents">13</p>
28<p class="contents">14</p>
29<p class="contents">15</p>
30<p class="contents">16</p>
31<p class="contents">17</p>
32<p class="contents">18</p>
33<p class="contents">19</p>
34</div>

投稿2018/12/25 05:30

yambejp

総合スコア117752

yambejp

2018/12/25 05:49

一応前回、全部見せるのか徐々に見せるのか聞いたんですけどね・・・

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

ベストアンサー

$('.contents').show();

全ての要素に.contentsがあるので当然ですね。
「現在何番目から何番目が表示されている」というような情報を保持して
押下する度に更新する必要があると思います。

js
1var number = 4;
2var list_feed = 4;//何件ずつ送るか
3$(function(){
4  $('.contents:gt('+number+')').hide();
5  $('.contents:eq('+number+')').after($('<p>≫ もっと見る</p>'));
6  $(document).on('click','p',function(){
7      $('.contents:gt('+number+')').show();
8      number+=list_feed;
9      $('.contents:gt('+number+')').hide();
10      if($('.contents').length > (number+list_feed)){
11          $('.contents:eq('+number+')').after($('<p>≫ もっと見る</p>'));
12      }
13      $(this).remove();
14  });
15});