jQuery .filter() Method

What You’ll Learn

The .filter() traversing method narrows the current jQuery collection to elements matching a selector, passing a callback test, or matching a DOM/jQuery reference. This tutorial covers official div and list demos, function-based filtering by content and index, and compares .filter() with .not() and .find().

Introduction

A jQuery selector often returns more elements than you need — all list items when you only want active ones, every table row when you only want checked checkboxes. The .filter() method narrows that collection to a matching subset without re-querying the DOM.

Available since jQuery 1.0, .filter() accepts a CSS selector string, a callback function, a DOM element, or a jQuery object. Elements that match (or return true from the callback) stay in the result; everything else is excluded.

Understanding the .filter() Method

Given a jQuery object representing a set of DOM elements, .filter(selectorOrFunctionOrElement) tests each element and returns a new jQuery object containing only those that pass. Unlike .find(), it does not search descendants — it only evaluates elements already in the current set.

The callback form receives index and element; this inside the function refers to the current DOM node. Return true to keep the element, false to exclude it.

📝 Syntax

General forms of .filter:

.filter( selector )
.filter( function( index, element ) { return trueOrFalse; } )
.filter( element )
.filter( jQueryObject )

Parameters

• selector — a string containing a selector expression tested against each element in the current set.
• function — a callback returning true to keep the element; receives index and DOM element; this is the current element.
• element (since 1.4) — a DOM node; keeps elements matching this node.
• jQuery object (since 1.4) — keeps elements present in the provided jQuery collection.

Return value

• A new jQuery object containing the filtered subset of the original matched elements.

Official jQuery API selector example

$( "li" ).filter( ":nth-child(2n)" ).css( "background-color", "red" );
// Items 2, 4, 6 — every even DOM child position

Examples Gallery

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

$( "div" )
  .css( "background", "#c8ebcc" )
  .filter( ".middle" )
  .css( "border-color", "red" );

All divs → green background
.middle divs → red border

$( "li" )
  .filter( function () {
    return $( "strong", this ).length === 1;
  } )
  .css( "background-color", "red" );

Item 1 (one strong) → red
Item 2 (two strong tags) → excluded

$( "li" )
  .filter( function ( index ) {
    return index % 3 === 2;
  } )
  .css( "background-color", "red" );

Indexes 2 and 5 → red (items 3 and 6)
index % 3 === 2 pattern

$( "div" )
  .css( "background", "#b4b0da" )
  .filter( function ( index ) {
    return index === 1 || $( this ).attr( "id" ) === "fourth";
  } )
  .css( "border", "3px double red" );

Second div (index 1) → double red border
#fourth div → double red border (even if different index)

$( "#keep-demo li" ).filter( ".active" ).css( "color", "green" );
$( "#drop-demo li" ).not( ".active" ).css( "color", "gray" );

// Same markup, opposite selection logic

filter(".active") → green active items
not(".active") → gray inactive items

🚀 Common Use Cases

• Active tab or menu item — $("li").filter(".active").
• Checked form controls — $("input").filter(":checked").
• Visible elements only — $(".panel").filter(":visible").
• Custom content rules — callback to test text length, child count, or data attributes.
• Index-based selection — callback with modulo or range logic.
• Match known element — .filter(document.getElementById("x")).

📝 Notes

• Available since jQuery 1.0; DOM/jQuery object form since 1.4.
• Narrows the current set — does not search descendants (use .find()).
• Callback must return truthy to keep an element; falsy excludes it.
• With a selector string, text and comment nodes are removed during filtering.
• Pushes onto jQuery’s internal stack — pair with .end() to restore the previous set.
• Empty filter result returns an empty jQuery object — safe to chain.

💡 Best Practices