jQuery .has() Method

What You’ll Learn

The .has() traversing method filters containers — it keeps elements from the current set that contain at least one matching descendant. This tutorial covers the official nested list demo, the ul/li containment check, comparisons with .find() and .filter(), and DOM element containment.

Introduction

Sometimes you need containers that contain something specific — list items with nested sublists, divs that hold error messages, sections with active tabs inside. The .has() method filters the current set to elements whose descendants match your selector.

Available since jQuery 1.4, .has(selector) or .has(domElement) returns the parent elements from the original collection — not the matching descendants. Think of it as the inverse direction of .find(): find goes down to children; has keeps parents that have those children inside.

Understanding the .has() Method

Given a jQuery object representing a set of DOM elements, .has(selectorOrElement) tests each element’s descendants. If any descendant matches, that element stays in the result. The returned jQuery object still refers to the same container nodes — just a filtered subset of them.

This is different from .filter(), which tests the elements themselves. $("li").filter(".active") keeps li elements with class active. $("li").has(".active") keeps li elements that contain a descendant with class active — the li itself need not have that class.

📝 Syntax

General forms of .has:

.has( selector )
.has( contained )

Parameters

• selector — a string containing a selector expression tested against descendants of each element in the current set.
• contained — a DOM element; keeps elements that contain this node as a descendant.

Return value

• A new jQuery object containing elements from the current set that have at least one matching descendant.

Official jQuery API nested list example

$( "li" ).has( "ul" ).css( "background-color", "red" );
// Red on item 2 only — the li that contains a nested ul

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" ).has( "ul" ).css( "background-color", "red" );

list item 2 → red (contains nested ul)
Items 1, 2-a, 2-b, 3, 4 → unchanged

$( "ul" ).append( " " +
  ( $( "ul" ).has( "li" ).length ? "Yes" : "No" ) +
  " " );
$( "ul" ).has( "li" ).addClass( "full" );

Appended text: "Yes"
ul.has("li") → red .full border class

$( "#has-demo li" ).has( "ul" ).css( "color", "red" );
$( "#find-demo li" ).find( "ul" ).css( "border", "2px solid blue" );

// .has() → li parents | .find() → ul descendants

.has("ul") → red text on parent li
.find("ul") → blue border on nested ul element

$( "#has-active li" ).has( ".active" ).css( "background", "#ffe0e0" );
$( "#filter-active li" ).filter( ".active" ).css( "background", "#e0e0ff" );

// li with active child vs li that IS active

.has(".active") → pink parent li (contains active link)
.filter(".active") → blue li that has class active itself

$( ".panel" )
  .has( ".error" )
  .addClass( "has-error" );

Panels containing .error span → .has-error class
Clean panels → unchanged

🚀 Common Use Cases

• Nested menu items — $("li").has("ul") for items with submenus.
• Form sections with errors — $(".section").has(".error").
• Tables with checked rows — $("tr").has(":checked").
• Cards with images — $(".card").has("img").
• Lists with empty inputs — $("form").has("input:blank") (with appropriate selector).
• Containment check — if ($("#container").has("#target").length) { ... }.

📝 Notes

• Available since jQuery 1.4 — accepts a selector string or DOM element.
• Returns container elements from the current set — not matching descendants.
• Checks all descendant levels — not limited to direct children.
• Related to :has() selector — method form for mid-chain filtering.
• Pushes onto jQuery’s internal stack — pair with .end() to restore the previous set.
• Empty result returns an empty jQuery object — safe to chain.

💡 Best Practices