jQuery slice - 最終結果

可以說我有100個div，我想每次顯示5個div。 onclick - 我正在加載5個以上。jQuery slice - 最終結果

任何想法如何檢查我是否到達最後一個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>

來源

2017-08-09 Liron Paryente

沒有有效的'HTML'這裏。 'id's應該是獨一無二的。你不能有同名的100個'id'。 – Red

是的，我知道，只是一個糟糕而快速的重複 –

您可以檢查，如果最後div可見

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

來源

2017-08-09 14:34:34 CumminUp07

我做的工作示例爲您here

首先，你必須在「結果」使用類沒有ID ，並使用$(".results:lt(5)")

來源

2017-08-09 14:36:04 TalGabay

首先id屬性應該在同一個文件中是唯一的，所以我們E共有類代替，e.g：

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

你可以使用index的與jQuery選擇lt()和gt()的幫助，請查看下工作的例子。

希望這會有所幫助。

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

來源

2017-08-09 14:45:54

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

來源

2017-08-09 14:47:21 charlietfl

jQuery slice - 最終結果

回答

相關問題