jQuery .prev() Method

What You’ll Learn

The .prev() traversing method moves sideways in the DOM — it returns the immediately preceding sibling of each matched element, optionally filtered by a selector. This tutorial covers the official list-item and Go to Prev demos, selector filtering, comparisons with .next(), .prevAll(), and .siblings(), and practical row-navigation patterns.

Introduction

Siblings share the same parent — think of list items in a ul, table rows in a tbody, or divs in a horizontal gallery. When you need the element right before your current selection, reach for .prev().

Available since jQuery 1.0 (selector filtering since 1.4), .prev([selector]) constructs a new jQuery object from the immediately preceding sibling of each element in the current set. It does not descend into children or climb to ancestors — it stays on the same level of the tree, one step backward.

Understanding the .prev() Method

Given a jQuery object representing a set of DOM elements, .prev() looks at each element’s previousElementSibling in the DOM. If that neighbor exists, it is added to the result. When you pass a selector, jQuery includes the neighbor only if it matches — otherwise the result for that element is empty.

This is narrower than .prevAll(), which collects every preceding sibling, and narrower than .siblings(), which can return both directions. .prev() is the precision tool for “the very previous one” — perfect for backward step wizards, walking a gallery with a Go to Prev button, or highlighting the row above a selection.

📝 Syntax

General form of .prev:

.prev( [ selector ] )

Parameters

• selector (optional) — a string containing a selector expression. The immediately preceding sibling is included only if it matches this selector.

Return value

• A new jQuery object containing the immediately preceding sibling of each element in the current set (filtered when a selector is provided).

Official jQuery API list example

$( "li.third-item" ).prev().css( "background-color", "red" );

// Red background on list item 2 — the very previous sibling before item 3

Examples Gallery

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

$( "li.third-item" ).prev().css( "background-color", "red" );

list item 2 → red background

Items 1, 3, 4, 5 → unchanged

var $curr = $( "#start" );

$curr.css( "background", "#f99" );

$( "button" ).on( "click", function() {

  $curr = $curr.prev();

  $( "div" ).css( "background", "" );

  $curr.css( "background", "#f99" );

});

Each click → highlight moves to the previous div sibling

At the first div → .prev() returns empty, highlight stays put

$( "p" ).prev( ".selected" ).css( "background", "yellow" );

Paragraph whose immediate previous sibling has .selected → yellow on that sibling

Other paragraphs → no match (previous sibling lacks .selected)

$( "#prev-demo li.third-item" ).prev().css( "color", "red" );

$( "#next-demo li.third-item" ).next().css( "color", "blue" );



// .prev() → item 2 | .next() → item 4

.prev() → red on item 2 only

.next() → blue on item 4 only

Same distance (one step), opposite direction

$( "tr.selected" ).prev().addClass( "context-row" );

Row immediately above .selected → .context-row class

First row (no previous tr) → empty .prev(), no change

🚀 Common Use Cases

• Backward gallery navigation — official pattern: $curr = $curr.prev() on each Go to Prev click.
• Step wizards (reverse) — $(".step.active").prev(".step").addClass("active") when steps are adjacent siblings.
• Context rows in tables — highlight the row above the current selection for hierarchy hints.
• Form field labels — update the element immediately before an input when validation state changes.
• Accordion panels — close or style the panel immediately before a clicked header.
• Chained navigation — .prev().prev() skips two siblings when layout guarantees adjacency.

📝 Notes

• Available since jQuery 1.0 — optional selector argument since 1.4.
• Returns at most one sibling per source element — not all preceding siblings.
• Text nodes and comments between elements are skipped — jQuery uses element siblings only.
• With a selector, only the immediate previous sibling is tested — no further scanning.
• Empty result returns an empty jQuery object — safe to chain without errors.
• Pair with .next() for forward navigation and .prevAll() when you need the full head of siblings.

💡 Best Practices