.first()

Categories: Traversing > Filtering

.first() Returns: jQuery

Description: Reduce the set of matched elements to the first in the set.

version added: 1.4.first()

Given a jQuery object that represents a set of DOM elements, the .first() method constructs a new jQuery object from the first matching element.

Consider a page with a simple list on it:

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

We can apply this method to the set of list items:

$('li').first().css('background-color', 'red');

The result of this call is a red background for the first item.

Example:

Highlight the first span in a paragraph.

<!DOCTYPE html>
<html>
<head>
  <style>.highlight{background-color: yellow}</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p><span>Look:</span> <span>This is some text in a paragraph.</span> <span>This is a note about it.</span></p>
<script>$("p span").first().addClass('highlight');</script>

</body>
</html>

Demo:

Support and Contributions

Need help with .first() or have a question about it? Visit the jQuery Forum or the #jquery channel on irc.freenode.net.

Think you've discovered a jQuery bug related to .first()? Report it to the jQuery core team.

Found a problem with this documentation? Report it to the jQuery API team.

Tim

Got a question..

Is calling .first() faster than using the selector ‘:first’?
Anonymous

i’d say it’s a simpler way of doing .get(0)
http://www.learningjquery.com/ Karl Swedberg

No, it's just another way of doing .eq(0).
Richard Coles

i think its much faster cause it doesn’t require selector parsing
moltendorf

Using .first() is about ten times faster than using :first. Tested using Firefox 3.6.

100,000 iterations:
55,870ms using :first
5,858ms using .first()

Code:
$(document).ready (function() {
var i, time = +new Date;
for ( i = 0; i < 100000; ++i ) {
$ ( 'div:first' );
}
console.log ( (+new Date) – time );
time = +new Date;
for ( i = 0; i < 100000; ++i ) {
$ ( 'div' ).first ( );
}
console.log ( (+new Date) – time );
});
http://twitter.com/tothemario Mario Izquierdo

What about to use an optional selector as first() param?
examples:
someElements.first() // the usual first() behaviour
someElements.first(“form”) // select the first element which is a form
someElements.first(“.myClass”) // select the first element with class=”myClass”
Dadooda

+1 vote in favor of giving first() an optional selector argument. When dealing with deeply nested dynamic elements, one has to append .first() to every find() call to ensure it doesn't match too much.

first() with a selector would be a nicer solution to the problem.
Chris

How would you express NOT .first()?
http://www.learningjquery.com/ Karl Swedberg

.slice(1)
See .slice()
http://twitter.com/jdelaphant jdelaphant

But they don't do exactly the same thing.

$(“p”).find(“span”).first().addClass('highlight');
$(“p”).find(“span:first”).addClass('highlight');

The above statements will behave differently in a document with more than one paragraph, each with more than one span in it.
http://twitter.com/jdelaphant jdelaphant

But they don't do exactly the same thing.

$(“p”).find(“span”).first().addClass('highlight');
$(“p”).find(“span:first”).addClass('highlight');

The above statements will behave differently in a document with more than one paragraph, each with more than one span in it.

jQuery API