前提・実現したいこと
初心者です。
「もっと見る」ボタンを押すと、直前のリスト要素を2つずつ表示させたいのですが、prevがうまく機能していないようです。
該当のソースコード
html
1 2 <div class="section1"> 3 <ul> 4 <li class="list"></li> 5 <li class="list"></li> 6 <li class="list"></li> 7 <li class="list"></li> 8 <li class="list"></li> 9 </ul> 10 <button class="more-button"></button> 11 </div> 12 <div class="section2"> 13 <ul> 14 <li class="list"></li> 15 <li class="list"></li> 16 <li class="list"></li> 17 <li class="list"></li> 18 <li class="list"></li> 19 </ul> 20 <button class="more-button"></button> 21 </div> 22
jQuery
1var moreNum = 2; 2//最初の2件以外、非表示にする 3$('ul .list:nth-child(n + ' + (moreNum + 1) + ')').addClass('is-hidden'); 4$('.more-button').on('click', function () { 5 // slice 6 $('.more-button').prev('ul .list.is-hidden').slice(0, moreNum).removeClass('is-hidden').addClass('is-show'); 7}); 8
経緯
当初prevを使わず実装したら、section1内の.more-buttonのみ正しい動きをしましたが、section2内のものが動かなくprevを使用してみましたが、どちらも動かなくなった経緯があります。
jQuery
1 $('ul .list.is-hidden').slice(0, moreNum).removeClass('is-hidden').addClass('is-show'); 2