如果列表項超過5個刪除項目並顯示下5個列表項目javascript html

Question

我試圖動態生成UL列表，但問題是列表正在生成1000個項目的列表。所以我想限制列表，

下面是列表，它會繼續動態

aa 
 
bb 
 
cc 
 
dd 
 
ee 
 
ff 
 
gg 
 
hh 
 
ii 
 
jj 
 
kk 
 
ll 
 
mm 
 
nn 
 
. 
 
. 
 
. 
 
nth

我要劃分組的UL名單產生，所以應該表現出一5列表項目，然後將其刪除並顯示下5個列表項目，並重復步驟。

我M在<uL><li>

生成列表我想這

$(function() { 
 
    $('span').click(function() { 
 
     $('#datalist li:hidden').slice(0, 2).show(); 
 
     if ($('#datalist li').length == $('#datalist li:visible').length) { 
 
      $('span ').hide(); 
 
     } 
 
    }); 
 
});

ul li:nth-child(n+3) { 
 
    display:none; 
 
} 
 
ul li { 
 
    border: 1px solid #aaa; 
 
} 
 
span { 
 
    cursor: pointer; 
 
    color: #f00; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="datalist"> 
 
    <li>aa</li> 
 
    <li>bb</li> 
 
    <li>cc</li> 
 
    <li>dd</li> 
 
    <li>ee</li> 
 
    <li>ff</li> 
 
    <li>gg</li> 
 
    <li>hh</li> 
 
    <li>ii</li> 
 
    <li>jj</li> 
 
</ul> 
 
<span>readmore</span>

Answer 1

所以，如果我們的目標是隻顯示最後5個項目，你可以做到這一點只是CSS使用nth-last-of-type。

注意：忽略javascript和按鈕，它只是爲了演示將項目添加到列表中。

$('button').on('click',function(){ 
 
\t var lastItem = $('#datalist li:last-child').html(); 
 
    var nextItem = parseInt(lastItem)+1; 
 
    $('#datalist').append('<li>'+nextItem+'</li>') 
 
});

ul#datalist > li { 
 
    display: none; 
 
} 
 
ul#datalist > li:nth-last-of-type(-n+5) { 
 
display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="datalist"> 
 
    <li>01</li> 
 
    <li>02</li> 
 
    <li>03</li> 
 
    <li>04</li> 
 
    <li>05</li> 
 
    <li>06</li> 
 
    <li>07</li> 
 
    <li>08</li> 
 
    <li>09</li> 
 
    <li>10</li> 
 
</ul> 
 
<button>Add item</button>

Answer 2

好吧，這裏是一個JS的解決方案，將刪除所有，但最後5個項目。

再一次，請忽略添加項目的按鈕，這只是爲了演示添加項目時會發生什麼。

$('button').on('click', function() { 
 
    var lastItem = $('#datalist li:last-child').html(); 
 
    var nextItem = parseInt(lastItem) + 1; 
 
    $('#datalist').append('<li>' + nextItem + '</li>') 
 
    filterList(); 
 
}); 
 

 
function filterList() { 
 
    $("#datalist > li").not(":nth-last-of-type(-n+5)").remove(); 
 
} 
 

 
filterList();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<ul id="datalist"> 
 
    <li>01</li> 
 
    <li>02</li> 
 
    <li>03</li> 
 
    <li>04</li> 
 
    <li>05</li> 
 
    <li>06</li> 
 
    <li>07</li> 
 
    <li>08</li> 
 
    <li>09</li> 
 
    <li>10</li> 
 
</ul> 
 
<button>Add item</button>