62

The .first() method was added in jQuery 1.4.

The :first selector has been around since 1.0.

From the docs:

:first

The :first pseudo-class is equivalent to :eq(0). It could also be written as :lt(1). While this matches only a single element, :first-child can match more than one: One for each parent.

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

It seems that .first() is a filter that returns another jQuery object, while :first is just a selector.

But, they can both be used to accomplish the same thing.

So, when should one be used instead of the other? Performance? Please provide examples.

Community
  • 1
  • 1
ScottE
  • 21,530
  • 18
  • 94
  • 131
  • 3
    **WARNING**: as of jQuery 3.4.0, `:first` selector is deprecated and will be removed in jQuery 4. Use `first()` instead. [link](https://blog.jquery.com/2019/04/10/jquery-3-4-0-released/) – evilReiko Apr 25 '19 at 06:27

4 Answers4

62

If .first() and :first are used in the same context to get the same information, example:

Html:

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

Script:

console.log("1", $('ul li').first().text());
console.log("2", $('ul li:first').text());

.first() is more performant

** enter image description here

As mentionned by Andrew Moore, .first() is the equivalent of .eq(0).
According to jsperf.com, .eq(0) would be the best, but there is no big difference with .first().

You can see my source, here: http://jsperf.com/first-vs-first-vs-eq-0

Simon Arnold
  • 15,849
  • 7
  • 67
  • 85
  • 5
    +1 for experimentation. Any idea how you could explain your findings? – Shawn Apr 04 '13 at 19:46
  • 4
    According to a newer revision of that test (http://jsperf.com/jquery-first-vs-first2/11) the fastest would be `$('ul li')[0]`. However, I noticed this does not seem to return a jQuery object, whereas `.first()` and `:first` do. So the best, performance-wise, would be `.first()`. – kasimir Sep 05 '13 at 11:15
  • 5
    +1 for actually _directly_ answering the question, providing background, and showing proof of results (with links!) – Michael Richardson Dec 03 '13 at 16:10
  • .first() is actually running faster for me on Safari 7, that's madness given .first() is a wrapper for .eq(0)! – andrewb Feb 20 '14 at 23:36
  • 13
    that's weird. I would've thought that `:first` is faster as JS can stop searching through the DOM after finding the first element, while `.first()` needs to have the entire collection to output the first one. – ProblemsOfSumit Nov 04 '14 at 14:20
  • 1
    How about if you have a much larger list, like hundreds, thousands of returns... is this still the case!?!? – JeopardyTempest Jun 14 '18 at 18:09
44

.first() can be used to select the first element in a jQuery collection.

Basically, it avoids having to do a new query or break the chain in situations when you need to work on a collection and then exclusively on the first element.

Actually, one of the most costly operations you can do in jQuery is a query. The less you do, the better it is...

One example I can think of right now is an image gallery script where your first image is always the default active one, yet you need to attach an event handler on each image...

$('#gallery img').click(myFunc).first().addClass('active');

// Instead of
$('#gallery img').click(myFunc);
$('#gallery img:first').addClass('active');

.first() is also syntactic sugar for something that exists since 1.1.2... .eq(0):

$('#gallery img').click(myFunc).eq(0).addClass('active');

in fact, that's how it is implemented in jQuery itself:

first: function() {
  return this.eq( 0 );
}
Vaughan
  • 391
  • 5
  • 18
Andrew Moore
  • 93,497
  • 30
  • 163
  • 175
  • 9
    Could you please expand your answer if you only needed the first element, and didn't have (or need) the full set queried? Would you use `$('#gallery img').first().addClass('active')` anyway, or would you prefer `$('#gallery img:first').addClass('active')` ? – goodeye Dec 18 '11 at 19:37
  • 1
    Although this is the selected answer it doesn't seem to actually answer the question, while Simon Arnold's answer (which was added much later on) does. – Vaughan Jun 14 '14 at 16:58
  • There were two questions. This answers one case "when should one be used instead of the other?", while Simon answers "Performance?" – goodeye Jul 10 '14 at 01:09
4

$('li').css('color', 'red').first().css('color', 'green'); would apply the filter after the collection already has been utilised.

In most cases I would use the selector :first since it can be combined with so many other nice selectors, all in one sweep.

chelmertz
  • 20,399
  • 5
  • 40
  • 46
1

The :first pseudo selector and first() can do the same thing.

As for performance, here is a live example of performance difference between jQuery first(),:first, eq(0) and :nth(0).

http://jsperf.com/jquery-first-vs-first-selector, Please check it out!

Hope this will help.

Jerry Liu
  • 529
  • 6
  • 10