.has()

jQuery Reference

.has()는 특정 자손을 포함한 요소만 현재 선택 집합에서 남깁니다. 반환되는 대상은 일치한 자손이 아니라 그 자손을 포함하는 원래 요소입니다.

문법과 적용 범위

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

인수는 자손을 찾을 선택자 또는 DOM 요소입니다. 자손은 바로 아래 자식뿐 아니라 더 깊은 단계도 포함합니다. .find()는 조건에 맞는 자손을 반환하지만 .has()는 원래 집합을 필터링합니다. 자기 자신이 조건에 맞는다고 남는 것은 아니므로 현재 요소의 클래스 조건은 .filter()로 검사하세요.

jQuery 공식 문서의 .has() 정의와 인수에서 다른 호출 형태도 확인할 수 있습니다.

전체 실행 예제

아래 코드를 UTF-8 형식의 example.html 파일로 저장한 뒤 브라우저로 여세요. 예제는 jQuery 4.0.0 일반 빌드를 외부 주소에서 불러오므로 인터넷 연결이 필요합니다. 문서가 준비된 뒤 실행하도록 $(function () { ... }) 안에 코드를 작성했습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery has 예제</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">공지</span></p></div>
<div class="card" id="b"><p>일반 글</p></div>
<div class="card badge" id="c">자신에게만 badge 클래스</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>

실행 결과 확인

a 카드만 강조되고 결과는 a입니다. badge가 한 단계 더 안쪽에 있어도 자손이므로 포함되며, c의 badge는 자신에게만 있으므로 조건을 만족하지 않습니다.

사용할 때 주의할 점

.has()는 특정 시점의 집합을 반환합니다. 이후 badge를 추가하거나 삭제해도 저장된 집합이 자동 갱신되지는 않으므로 필요할 때 다시 실행하세요.
찾은 badge 자체를 바꾸려면 .find(".badge")를 사용하세요. .has(".badge").addClass(...)는 카드에 클래스를 추가합니다.
인수의 선택자 범위와 원래 집합의 범위를 분리해 생각하면 엉뚱한 조상에 스타일을 적용하는 실수를 줄일 수 있습니다.

용도를 비교하려면 .find()와 반환 대상 비교을 참고하세요.

jQuery Reference