如何在文檔加載時僅顯示UL中的前3個元素？

Question

我有一個列表（UL），其中有一類.more_stories UL包含LI。

我負載使用此代碼隱藏在默認情況下：

$('ul.more_stories li').css({'display': 'none'}); 

現在我想顯示的UL中的第一個3個華里項目之後。我怎麼能在jQuery中做到這一點？

- 注意：我有幾個同類的UL。

我嘗試，我得到意想不到的效果..提前

// more stories 
$('ul.more_stories li').css({'display': 'none'}); 
$('ul.more_stories li:gt(2)').show(); 

感謝。

Answer 1

你想要:lt()選擇，而不是像這樣：

$('ul.more_stories li').hide(); 
$('ul.more_stories li:lt(3)').show(); 

或者，簡單一點/快使用.slice()：

$('ul.more_stories li').hide().slice(0, 2).show(); 

這種方法隱藏所有這些，然後用同一套和顯示0-2指數元素。

---

您也可以扭轉的辦法，永遠躲在第3，這樣的：再次使用.slice()

$('ul.more_stories li:gt(2)').hide(); 

或者：

$('ul.more_stories li').slice(3).hide(); 

---

徵集意見，以使這個工作跨越多個<ul>元素，使用.each()循環，如下所示：

$('ul.more_stories').each(function() { 
    $(this).children().slice(3).hide(); 
});