リストアイテムが5つ以上のアイテムを削除し、次の5つのリストアイテムを表示する場合javascript html

Question

動的リストを生成しようとしていますが、問題のリストは1000個のリストを生成しています。ので、私はそれが第一5リストが表示されているはずですので、グループ内のULリストを分割したい以下

が動的に

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

を生成する上で維持するリストで、リストを制限したいですそれを削除し、次の5つのリスト項目を表示して、もう一度手順を繰り返す必要があります。

私は目標は、最後の5つの項目を表示する場合、あなたがこれを行うことができますので、この

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

を試してみました<uL><li>

でリストを生成メートルちょうどnth-last-of-typeを使用してCSS。

注：リストに項目を追加する方法を示すために、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

[OK]を、ここでは最後の5つの項目が、すべて削除されますJSソリューションです。

また、アイテムを追加するボタンを無視してください。これは、アイテムが追加されたときの状況を示すためのものです。あなたがこれまでに試してみました何

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