jQuery .first() Method

What You’ll Learn

The .first() traversing method reduces the current jQuery collection to the first element — index 0. This tutorial covers the official list highlight demos, compares .first() with .eq(0) and .last(), and shows how to chain after .filter() and .find().

Introduction

After selecting multiple elements — list items, table rows, tabs, cards — you often need just the first one. Maybe you want to highlight the top menu item, focus the first input in a form, or style the leading row in a table. The .first() method picks that element in one readable step.

Available since jQuery 1.4, .first() takes no arguments. It constructs a new jQuery object from the element at index zero in the current set. It is shorthand for .eq(0) — same result, clearer intent when you always want the leading element.

Understanding the .first() Method

Given a jQuery object representing zero or more DOM elements, .first() returns a new jQuery object containing only the first element in that set. The index is always zero-based — the first matched element is at position 0.

If the collection is empty, .first() returns an empty jQuery object. If the collection has one element, that element is returned unchanged in a new wrapper. The method does not search the DOM again — it only looks at the current jQuery object.

📝 Syntax

General form of .first:

.first()

Parameters

• None — .first() does not accept any arguments.

Return value

• A new jQuery object containing the first element in the current set, or an empty set if there are no matched elements.

Official jQuery API list example

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

// Red background on list item 1 only

Examples Gallery

Examples 1–2 follow the official jQuery API documentation. Use DevTools or the Try-it links to run each snippet in the browser.

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

list item 1 → red background

Items 2–5 → unchanged

$( "ul li" ).first().addClass( "highlight" );

First ul li → yellow .highlight class

Remaining items → default styling

$( "#first-demo li" ).first().css( "color", "green" );

$( "#eq-demo li" ).eq( 0 ).css( "color", "green" );



// Identical result — different syntax

.first() and .eq(0) → both green on item 1

Same jQuery object length (1) after either call

$( "li" )

  .filter( ".active" )

  .first()

  .css( "font-weight", "bold" );

First .active item → bold

Other .active items → normal weight

$( ".checkout" )

  .find( "input[type='text']" )

  .first()

  .focus();

First text input in .checkout → receives focus

Other inputs → unchanged

🚀 Common Use Cases

• Highlight lead item — $("ul.menu li").first().addClass("active").
• Auto-focus first field — $(".form").find("input").first().focus().
• First visible tab — $(".tab").filter(":visible").first().
• Primary row styling — $("tbody tr").first().addClass("lead").
• First error message — $(".error").first().show().
• Read first data cell — $("tr").first().find("td").first().text().

📝 Notes

• Available since jQuery 1.4 — no arguments accepted.
• Equivalent to .eq(0) — shorthand for index zero only.
• Operates on the current jQuery collection — does not re-query the DOM.
• Empty input collection returns empty output — safe to chain.
• Pushes onto jQuery’s internal stack — pair with .end() to restore the previous set.
• For the last element, use .last() or .eq(-1) instead.

💡 Best Practices