jQuery .has(): Select Elements with Matching Descendants

jQuery Reference

.has() keeps elements in the current selection that contain a matching descendant. It returns the original containing elements, rather than the descendants that satisfied the condition.

Syntax and behavior

$(".card").has(".badge");
$(".card").has(document.getElementById("badge"));

Pass a descendant selector or a DOM element. Descendants may be nested several levels deep. .find() returns matching descendants, whereas .has() filters the original selection. A match on the original element itself does not qualify it; use .filter() to test classes on that element.

The official jQuery .has() documentation describes additional call signatures and argument types.

Complete runnable example

Save the following code as a UTF-8 example.html file and open it in a browser. It loads the full jQuery 4.0.0 build from an external URL, so an internet connection is required. The $(function () { ... }) callback waits for the document to be ready before running the example.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery has example</title>
  <style>
    body { margin: 24px; font-family: sans-serif; line-height: 1.6; }
    .marked { background: #fff0b3; border: 2px solid #835b00; }
    .active { color: #a00000; font-weight: bold; }
    button, input, select { font: inherit; }
    #output { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
<div class="card" id="a"><p><span class="badge">Notice</span></p></div>
<div class="card" id="b"><p>Regular content</p></div>
<div class="card badge" id="c">The badge class is on this card itself</div>
  <p id="output" aria-live="polite"></p>
  <script>
    $(function () {
      const $cards = $(".card").has(".badge");
      $cards.addClass("marked");
      $("#output").text($cards.map(function () { return this.id; }).get().join(", "));
    });
  </script>
</body>
</html>

Expected result

Only card a is highlighted, and the output is a. Its badge is nested inside a paragraph but still counts as a descendant. Card c has the badge class on itself, so it does not match.

Important details and troubleshooting

The returned collection describes the document at the time of the call. It does not update automatically when badges are later added or removed; run the query again when needed.
Use .find(".badge") to change the badge itself. .has(".badge").addClass(...) adds the class to the containing card.
Keep the initial selection and the descendant condition separate when deciding which elements should receive a style or behavior.

Compare the behavior with .find() descendant traversal.

jQuery Reference

jQuery :button Selector: Which Elements Does It Match?

Check how :button treats button elements, ordinary button inputs, and submit or reset inputs, with a working selection example.

jQuery .removeClass(): Remove Specific or All Classes

Remove selected class names or clear all classes, while distinguishing class removal from clearing inline styles.

jQuery .prepend(): Insert Content as the First Child

Add content at the beginning of an element and understand how existing nodes and multiple destinations affect the result.

jQuery .attr(): Read and Set HTML Attributes

Read and set attributes, distinguish them from current field properties, and understand Boolean and ARIA handling in jQuery 4.0.

jQuery .addClass(): Add One or More CSS Classes

Add one or more classes while preserving existing names, generate classes with a callback, and check why styling may not change.

jQuery .add(): Combine Element Selections

Combine selections without changing the original collection, and distinguish selecting elements from inserting them into the document.

jQuery .has(): Select Elements with Matching Descendants

Filter the original selection by matching descendants, and see why has and find return different elements.

jQuery .unwrap(): Remove a Parent and Keep Its Children

Remove matching immediate parents while preserving their children, and understand layout, event, and restoration implications.

jQuery .before(): Insert Content as the Previous Sibling

Insert or move content immediately before a target, and compare before with inside insertion and insertBefore syntax.

jQuery .find(): Select Matching Descendants

Search through descendant levels while excluding the container, and compare find with children, filter, and has.