CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Martin AJ
Martin AJ

Reputation: 6697

How can I select first N elements?

I have this 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>

I need to set a background color for first N elements. For example N = 4, So I want this:

enter image description here

As you see, I've set a gray background color to first 4 <li> elements. How can I do that by jQuery?

Upvotes: 1

Views: 1293

Answers (2)

Nenad Vracar
Nenad Vracar

Reputation: 122037

You can use :lt() DEMO

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

Select all elements at an index less than index within the matched set.

Upvotes: 5

Daniel
Daniel

Reputation: 11172

This will return the first 4 <li> elements and set the background color to gray

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

Upvotes: 3

Related Questions