slice () не работает должным образом с jQuery?

Question

slice () не работает должным образом. Я хочу отобразить 4-4 деления. Это работает, но не все div показываются. Прямо сейчас у меня есть 30 блоков, но когда я прокручиваю вниз, на экране отображаются 24 блока, почему? Я хочу отобразить все div.

$(window).scroll(function() {
  var position = $(window).scrollTop();
  var bottom = $(document).height() - $(window).height();

  if (position == bottom) {
    var row = Number($('#row').val());
    var allcount = Number($('#all').val());
    var rowperpage = 3;
    row = row + rowperpage;

    if (row <= allcount) {
      $('#row').val(row);
      $(".coupon-box:visible").last().nextAll('.coupon-box').slice(0, 4).fadeIn(1000);
    }
  }
});

.coupon-box {
  width: 200px;
  height: 120px;
  background: #ccc;
  margin: 25px;
  padding: 20px;
  text-align: center;
  padding-top: 100px;
}

.d-none-custom {
  display: none;
}

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

<div class="coupon-box">fixed box</div>
<div class="coupon-box">fixed box</div>
<div class="coupon-box">fixed box</div>
<div class="coupon-box">fixed box</div>
<div class="coupon-box">fixed box</div>

<div class="coupon-box d-none-custom">box 1</div>
<div class="coupon-box d-none-custom">box 2</div>
<div class="coupon-box d-none-custom">box 3</div>
<div class="coupon-box d-none-custom">box 4</div>
<div class="coupon-box  d-none-custom">box 5</div>
<div class="coupon-box d-none-custom">box 6</div>
<div class="coupon-box d-none-custom">box 7</div>
<div class="coupon-box d-none-custom">box 8</div>
<div class="coupon-box d-none-custom">box 9</div>
<div class="coupon-box  d-none-custom">box 10</div>
<div class="coupon-box d-none-custom">box 11</div>
<div class="coupon-box d-none-custom">box 12</div>
<div class="coupon-box d-none-custom">box 13</div>
<div class="coupon-box d-none-custom">box 14</div>
<div class="coupon-box  d-none-custom">box 15</div>
<div class="coupon-box d-none-custom">box 16</div>
<div class="coupon-box d-none-custom">box 17</div>
<div class="coupon-box d-none-custom">box 18</div>
<div class="coupon-box d-none-custom">box 19</div>
<div class="coupon-box  d-none-custom">box 20</div>
<div class="coupon-box d-none-custom">box 21</div>
<div class="coupon-box d-none-custom">box 22</div>
<div class="coupon-box d-none-custom">box 23</div>
<div class="coupon-box d-none-custom">box 24</div>
<div class="coupon-box  d-none-custom">box 25</div>
<div class="coupon-box d-none-custom">box 26</div>
<div class="coupon-box d-none-custom">box 27</div>
<div class="coupon-box d-none-custom">box 28</div>
<div class="coupon-box d-none-custom">box 29</div>
<div class="coupon-box  d-none-custom">box 30</div>

<input type="hidden" id="row" value="0">
<input type="hidden" id="all" value="20">

Answer 1

Вам необходимо изменить $("#all").val(totalDivs.length) ниже обновленный код.

$(document).ready(function(){
    var totalDivs=$("div.d-none-custom")
    $("#all").val(totalDivs.length)
})
$(window).scroll(function() {
  var position = $(window).scrollTop();
  var bottom = $(document).height() - $(window).height();

  if (position == bottom) {
    var row = Number($('#row').val());
    var allcount = Number($('#all').val());
    var rowperpage = 3;
    row = row + rowperpage;
    debugger;
    if (row <= allcount) {
      $('#row').val(row);
      
      $(".coupon-box:visible").last().nextAll('.coupon-box').slice(0, 4).fadeIn(1000);
    }
  }
});

.coupon-box {
  width: 200px;
  height: 120px;
  background: #ccc;
  margin: 25px;
  padding: 20px;
  text-align: center;
  padding-top: 100px;
}

.d-none-custom {
  display: none;
}

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

<div class="coupon-box">fixed box</div>
<div class="coupon-box">fixed box</div>
<div class="coupon-box">fixed box</div>
<div class="coupon-box">fixed box</div>
<div class="coupon-box">fixed box</div>

<div class="coupon-box d-none-custom">box 1</div>
<div class="coupon-box d-none-custom">box 2</div>
<div class="coupon-box d-none-custom">box 3</div>
<div class="coupon-box d-none-custom">box 4</div>
<div class="coupon-box  d-none-custom">box 5</div>
<div class="coupon-box d-none-custom">box 6</div>
<div class="coupon-box d-none-custom">box 7</div>
<div class="coupon-box d-none-custom">box 8</div>
<div class="coupon-box d-none-custom">box 9</div>
<div class="coupon-box  d-none-custom">box 10</div>
<div class="coupon-box d-none-custom">box 11</div>
<div class="coupon-box d-none-custom">box 12</div>
<div class="coupon-box d-none-custom">box 13</div>
<div class="coupon-box d-none-custom">box 14</div>
<div class="coupon-box  d-none-custom">box 15</div>
<div class="coupon-box d-none-custom">box 16</div>
<div class="coupon-box d-none-custom">box 17</div>
<div class="coupon-box d-none-custom">box 18</div>
<div class="coupon-box d-none-custom">box 19</div>
<div class="coupon-box  d-none-custom">box 20</div>
<div class="coupon-box d-none-custom">box 21</div>
<div class="coupon-box d-none-custom">box 22</div>
<div class="coupon-box d-none-custom">box 23</div>
<div class="coupon-box d-none-custom">box 24</div>
<div class="coupon-box  d-none-custom">box 25</div>
<div class="coupon-box d-none-custom">box 26</div>
<div class="coupon-box d-none-custom">box 27</div>
<div class="coupon-box d-none-custom">box 28</div>
<div class="coupon-box d-none-custom">box 29</div>
<div class="coupon-box  d-none-custom">box 30</div>

<input type="hidden" id="row" value="0">
<input type="hidden" id="all" value="20">