javascript - 如何选择前 N 个元素？

Question

我有这个 HTML:

<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>

我需要为前 N 个元素设置背景颜色。例如N = 4 , 所以我想要这个:

如您所见，我已将灰色背景颜色设置为前 4 <li>元素。我如何通过 jQuery 做到这一点？

Answer 1

您可以使用 :lt() DEMO

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

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