jQuery 切片 - 最后一个结果答案

【问题标题】：jQuery slice - last resultjQuery 切片 - 最后一个结果
【发布时间】：2018-01-17 12:18:28
【问题描述】：

假设我有 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>

【问题讨论】：

这里没有有效的HTML。 id 应该是独一无二的。您不能有 100 个具有相同名称的 id。
是的，我知道，只是一个糟糕而快速的复制

标签： javascript jquery slice

【解决方案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，查看下面的工作示例。

希望这会有所帮助。

$(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');
        }
    });
});

<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>

【讨论】：

【解决方案2】：

使用last() 和is()：

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')
   }
})

<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>

【讨论】：

【解决方案3】：

我为你做了一个工作示例here

首先，您必须在“结果”上使用 class 而不是 id，并使用 $(".results:lt(5)")

【讨论】：

【解决方案4】：

你可以查看最后一个div是否可见

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

【讨论】：