如何选择前N个元素？

Question

我有这个HTML：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我需要为前N个元素设置背景颜色。例如N = 4，我想要这个：

如您所见，我为前4个<li>元素设置了灰色背景色。我怎么能通过jQuery做到这一点？

Answer 1

您可以使用:lt() DEMO

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

选择匹配集内索引小于索引的所有元素。

Answer 2

这将返回前4个<li>元素，并将背景颜色设置为灰色

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