slice() is not working properly with jQuery?

user_7333403 0
Viewed 271

slice() is not working properly. I want to display 4-4 divs. It's working but not all divs are being displayed. Right now I have 30 box divs but when I scroll down its just display 24 divs, why? I want to display all divs.

$(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">

css html jquery javascript
1 Answers

You need to modify $("#all").val(totalDivs.length) below is updated code.

$(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">

user_54835800
Related