Отображение следующих 2 элементов при нажатии кнопки

Question

У меня есть список ul li.

При загрузке страницы я хочу скрыть все элементы с классом hide , а при добавлении кнопки «more» я хочу отобразить следующие 2 элемента и так далее.

$(function() {
  $('.hide').hide();

  $('#add_more').on('click', function() {
    // show
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<button id="add_more">Add next 2</button>
<ul>
  <li class="show">1</li>
  <li class="show">2</li>
  <li class="hide">3</li>
  <li class="hide">4</li>
  <li class="hide">5</li>
  <li class="hide">6</li>
  <!-- Other elements -->
  <li class="hide">n</li>
</ul>

Answer 1

Для этого вы можете получить последние показанные элементы, а затем использовать slice(), чтобы получить следующие два и отобразить их. Попробуйте это:

$(function() {
  $('#add_more').on('click', function() {
    $('.show:last').nextAll().slice(0, 2).toggleClass('show hide');
  })
})

.hide { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<button id="add_more">Add next 2</button>
<ul>
  <li class="show">1</li>
  <li class="show">2</li>
  <li class="hide">3</li>
  <li class="hide">4</li>
  <li class="hide">5</li>
  <li class="hide">6</li>
  <!-- Other elements -->
  <li class="hide">n</li>
</ul>