jQuery .filter() Method

What Is .filter()?

.filter() (since jQuery 1.0) builds a new set from a subset of the current matched elements. Pass a selector, a function test, a DOM element, or a jQuery object (1.4+). It only looks at elements already in the set — it does not search descendants.

$("li").filter(":nth-child(2n)")     // even children (official)
$("div").filter(".middle")           // keep .middle only
$("li").filter(function (i) {        // callback: true → keep
  return i % 3 === 2;
});

// filter() → keep matches
// not()    → drop matches
// find()   → search inside (descendants)

How to Use .filter()

Start broad, then keep only what you need.

1. Select a broad set (e.g. $("li") or $("div")).
2. Call .filter(selector) to keep matching elements.
3. Or pass a callback — return true to keep that element.
4. Or pass a DOM node / jQuery object (1.4+) to keep those nodes.
5. Chain styling or other methods on the reduced set.

Pseudocode

call $(set).filter(criterion)

result = empty set
for each element in set (with index i):
    if criterion is a function:
        keep = criterion(i, element) is truthy
    else if criterion is a selector:
        keep = element matches selector
    else:
        keep = element is in criterion (node / jQuery)

    if keep:
        add element to result

return result as a new jQuery object

Cheat Sheet

Keep filtering methods side by side.

Live Preview

From six list items, compare selector filter, callback filter, and .not().

Ready — choose a call and click Run.

jQuery Examples

Short, copy-ready snippets. Open DevTools, or use Try It Yourself for a live editor.

$("li").filter(":nth-child(2n)").append(" [kept]");

list item 1
list item 2 [kept]
list item 3
list item 4 [kept]
list item 5
list item 6 [kept]

$("div")
  .append(" [all]")
  .filter(".middle")
  .append(" [middle]");

every div → [all]
.middle divs → [all] [middle]

$("li").filter(function (index) {
  return index % 3 === 2;   // keep indexes 2, 5, …
}).append(" [kept]");

item 3 [kept]
item 6 [kept]
(indexes 2 and 5)

$("#a li").filter(".active").append(" [filter]");
$("#b li").not(".active").append(" [not]");

.filter(".active") → active items [filter]
.not(".active") → inactive items [not]

$("div").filter(document.getElementById("unique")).append(" [kept]");

// Same idea with a jQuery object:
// $("div").filter($("#unique")).append(" [kept]");

#unique [kept]
(other divs unmarked)

Performance Notes

Prefer a tight starting selector, then .filter(), over selecting everything and filtering a huge set.

Key Takeaways