如何選擇前N個元素？

我有這樣的HTML：如何選擇前N個元素？

<div class="notifications_list"> 
 
\t <div class="title">today <span>+84</span> <i class="fa fa-chevron-down"></i> </div> 
 
\t <ul> 
 
\t \t <li>notification 1</li> 
 
\t \t <li>notification 2</li> 
 
\t \t <li>notification 3</li> 
 
\t </ul> 
 
\t <div class="title">yesterday <span>-10</span> <i class="fa fa-chevron-down"></i> </div> 
 
\t <ul> 
 
\t \t <li>notification 4</li> 
 
\t \t <li>notification 5</li> 
 
\t </ul> 
 
\t <div class="title">in last week <span>+32</span> <i class="fa fa-chevron-down"></i> </div> 
 
\t <ul> 
 
\t \t <li>notification 6</li> 
 
\t \t <li>notification 7</li> 
 
\t \t <li>notification 8</li> 
 
\t \t <li>notification 9</li> 
 
\t \t <li>notification 10</li> 
 
\t </ul> 
 
</div>

我需要設置爲第一N個元素的背景顏色。例如N = 4，所以，我想這一點：

正如你看到的，我設置背景色爲灰色，首先4個<li>元素。我怎麼能通過jQuery來做到這一點？

來源

2016-08-29 Martin AJ

[用jQuery選擇第一個「n」個項目的可能的副本）（http://stackoverflow.com/questions/1865552/selecting-the-first-n-items-with-jquery） – mhodges

所有這些解決方案 - 一個單一的筆記 - 所有 - 和OP。而不是改變元素的CSS（以每個解決方案提出的方式） - 更好的解決方案是有一個類（例如：.highlight {background-color：#ddd}，然後使用您選擇的任何一種方法 - 將類添加到元素 - 這樣你就不會改變元素的CSS，但添加一個可以更容易操作的類（例如將灰色更改爲黃色）或刪除，只是我的意見:) – gavgrif

@gavgrif謝謝你的提示。 –

您可以使用:lt()DEMO

$('li:lt(4)').css('background', 'lightblue');

小於內匹配索引的索引，在選擇所有元素組。

來源

2016-08-29 21:43:10

只是一件事。這種方法可以在IE7/8等老式瀏覽器上運行嗎？ –

我不確定。 –

這將返回第4種<li>元素和設置背景顏色爲灰色

$("li").slice(0,4).css('background-color', 'gray');

來源

2016-08-29 21:42:31 Daniel

如何選擇前N個元素？

回答

相關問題