.find()

jQuery Reference

.find()는 현재 선택한 요소의 자손 중 조건에 맞는 요소를 찾습니다. 여러 단계 아래까지 탐색하지만 현재 요소 자신은 결과에 포함하지 않습니다.

문법과 적용 범위

$("#panel").find(".item");
$("#panel").find("*");

문서 트리에서 자손은 자식과 그 아래 모든 단계의 요소를 뜻합니다. .find()에는 선택자, DOM 요소 또는 jQuery 객체를 전달할 수 있고, 문자열 선택자로 쓰려면 인수가 필요합니다. 바로 한 단계 아래의 자식만 찾으려면 .children()을, 현재 집합 자체를 골라내려면 .filter()를 사용합니다. $("#panel .item") 같은 자손 선택자와 같은 범위를 만들 수도 있습니다.

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

전체 실행 예제

아래 코드를 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 find 예제</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 id="panel" class="item">
  <p class="item" id="a">직접 자식</p>
  <div><p class="item" id="b">중첩 자손</p></div>
</div>
<p class="item" id="c">패널 밖</p>
  <p id="output" aria-live="polite"></p>
  <script>
    $(function () {
      const $items = $("#panel").find(".item");
      $items.addClass("marked");
      $("#output").text($items.map(function () { return this.id; }).get().join(", "));
    });
  </script>
</body>
</html>

실행 결과 확인

a와 b만 강조되고 결과는 a, b입니다. panel 자신과 패널 밖의 c는 선택되지 않습니다. .find("*")로 바꾸면 패널 안의 div도 함께 선택됩니다.

사용할 때 주의할 점

부모의 클래스가 선택 조건과 같아도 .find()는 부모를 포함하지 않습니다. 부모까지 함께 처리하려면 .addBack()이나 별도 집합을 합치는 방식을 검토하세요.
아직 DOM에 만들어지지 않은 자식은 찾을 수 없습니다. 동적으로 내용을 추가한 후 다시 조회하거나 이벤트 위임을 사용해야 합니다.
선택자가 맞는데 결과가 비었다면 먼저 부모의 .length를 확인하세요. 잘못된 부모 선택과 자식 조건 불일치를 나누어 확인할 수 있습니다.

용도를 비교하려면 .has()로 자손을 가진 부모 선택하기, .addBack()으로 부모도 포함하기을 참고하세요.

jQuery Reference