Question

假设我有100个div，我想每次显示5个div。 onclick - 我正在加载5个。

知道如何检查我是否到达最后一个div？

<div id="results">1</div>
<div id="results">2</div>
<div id="results">3</div>
<div id="results">4</div>
<div id="results">100</div>

$(function () {
    $("results").slice(0, 5).show();
    $("#moreresults").on('click', function(e){
    e.preventDefault();
    $("div:hidden").slice(0, 5).slideDown();
  });
});


<a href="#" id="moreresults">Load More</a>

Answer 1

首先，id属性在同一文档中应该是唯一的，因此请使用常用类，例如：

<div class="results">1</div>
<div class="results">2</div>
<div class="results">3</div>
<div class="results">4</div>
...

您可以在jQuery选择器 lt() 和 gt() 的帮助下使用index，检查下面的工作示例。

希望这有帮助。

＆＃13;

$(function () {
    var number = 5;
    var count = $('.results').length;
    
    //Show just 5 first and hide the rest
    $(".results:gt("+(number-1)+")").hide();
    
    //Attach the click event
    $("#moreresults").on('click', function(e){
      e.preventDefault();
      
      //Increment the 'number'
      number = number+5;
      
        //Show 'number' of element
        $(".results:lt("+number+")").slideDown();
        
        //Check if all divs are loaded
        if( number >= count ){
           console.log('All the divs are loaded');
        }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="results">1</div>
<div class="results">2</div>
<div class="results">3</div>
<div class="results">4</div>
<div class="results">5</div>
<div class="results">6</div>
<div class="results">7</div>
<div class="results">8</div>
<div class="results">9</div>
<div class="results">10</div>
<div class="results">11</div>
<div class="results">12</div>
<div class="results">13</div>
<div class="results">14</div>
<div class="results">15</div>
<div class="results">16</div>
<div class="results">17</div>
<div class="results">18</div>
<div class="results">19</div>
<div class="results">20</div>

<a href="#" id="moreresults">Load More</a>

＆＃13;

Answer 2

您可以查看上一个div是否可见

   if($('div:last').is(":visible")) {
        //do things here
   }

Answer 3

我为你做了一个有效的例子here

首先，你必须在＆＃39;结果＆＃39;上使用class not id，并使用$(".results:lt(5)")

Answer 4

使用last()和is()：

＆＃13;

var $results = $('.results');

$results.slice(5).hide();

$('#moreresults').click(function(e){
   e.preventDefault();
   var $nextResults = $results.filter(':hidden').slice(0,5).slideDown()
   if( $nextResults.last().is( $results.last() ) ){     
     $(this).hide();
     console.log('Last one')
   }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="results">Item 1</div>
<div class="results">Item 2</div>
<div class="results">Item 3</div>
<div class="results">Item 4</div>
<div class="results">Item 5</div>
<div class="results">Item 6</div>
<div class="results">Item 7</div>
<div class="results">Item 8</div>
<div class="results">Item 9</div>
<div class="results">Item 10</div>
<div class="results">Item 11</div>
<div class="results">Item 12</div>
<div class="results">Item 13</div>



<a href="#" id="moreresults">Load More</a>

＆＃13;

jQuery slice - 最后的结果

4 个答案: