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

Question

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

如果我想用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中這樣做很容易。

希望這可以幫助。