Question

我试图动态生成UL列表，但问题是列表生成1000个项目的列表。所以我想限制列表，

下面是将继续动态生成的列表

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

我想在组中划分UL列表，以便它显示前5个列表项，然后将其删除并显示接下来的5个列表项，并再次重复步骤。

我在<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个项目，则可以使用pd.wide_to_long(df, ['Value_',], i='', j='Year') ID Value_ Year NaN 2013 1 100 2013 2 200 2014 1 245 2014 2 300 2016 1 200 2016 2 NaN仅使用CSS执行此操作。

注意：忽略javascript和按钮，它只是用于演示将项添加到列表中。

＆＃13;

nth-last-of-type

＆＃13;

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

＆＃13;

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

＆＃13;

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>

如果列表项超过5个删除项目并显示下5个列表项javascript html

2 个答案: