javascript - slice() 不能与 jQuery 一起正常工作？

Question

slice() 无法正常工作。我想显示4-4个div。它正在工作，但并非所有 div 都被显示。现在我有 30 个盒子 div，但是当我向下滚动时它只显示 24 个 div，为什么？我想显示所有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">