Question

是否可以直接通过html限制li和ol中ul元素的数量？

如果我想用javascript或jquery来做，我该怎么做？

Answer 1

如果您最终要隐藏它们，可以使用CSS 3。

li:nth-of-type(1n+15) {
    display: none;
}

Answer 2

jQuery提供了可以简化此过程的选择器。例如，如果要删除索引大于2的li元素：

$('#myList li:gt(2)').remove();

或者如果你愿意，你可以简单地通过css隐藏：

#myList li:nth-of-type(1n+4) {
  display: none;
}

以下是jsfiddle的示例。

Answer 3

您可以使用class和li元素隐藏类下的li（这不会隐藏页面上的所有li，而是隐藏指定类下的li）。

.class li:nth-of-type(1n+4) { display: none; };

Answer 4

这是我很快就被淘汰的东西。我的解决方案只是隐藏索引超过某个定义的最大值的元素 - 但您可以轻松地使用remove()。看看：

var max = 2;
$('ul, ol').each(function(){
  $(this).find('li').each(function(index){
    if(index >= max) $(this).hide()
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ol>

据我所知，没有办法在HTML中本地执行此操作。但是在JS或jQuery中这样做很容易。

希望这有帮助。

限制<ol>和<ul>中<li>元素的数量

4 个答案: