jQuery 탐색 - find() 메서드

jQuery 순회 참조 매뉴얼

예제

모든 파라그래프의 후손 span 요소를 검색하고, 그 색상을 빨간색으로 설정합니다：

$("p").find("span").css('color','red');

직접 시험해 보세요

정의와 사용법

find() 메서드는 현재 요소 집합의 각 요소의 후손을 선택자, jQuery 객체 또는 요소를 통해 필터링합니다.

문법

.find(selector)
파라미터 설명
selector 문자 값, 현재 요소 집합을 일치시키기 위해 사용되는 선택자 표현식을 포함합니다.

상세 설명

jQuery 객체가 DOM 요소 집합을 나타내는 경우, .find() 메서드는 DOM 트리에서 이 요소의 후손을 검색하고, 일치하는 요소로 새로운 jQuery 객체를 생성할 수 있습니다. .find()는 .children() 메서드와 유사하지만, 후자는 단일 레벨만 DOM 트리를 내려다보는 것입니다.

.find() 메서드의 첫 번째 명확한 특징은, 그것이 $() 함수에 전달하는 표현식과 같은 유형의 선택자 표현식을 받아들이는 것입니다. 이 표현식과 일치하는 요소를 필터링하여 요소를 필터링합니다.

다음 간단한 내장 목록을 생각해보세요：

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

목록 II에서 시작하여 목록 항목을 찾을 것입니다:

$('li.item-ii').find('li').css('background-color', 'red');

직접 시험해 보세요

이번 조사의 결과는, 프로젝트 A, B, 1, 2, 3 및 C가 모두 빨간 배경색으로 설정되었습니다. 프로젝트 II가 선택자 표현식에 맞지만 결과에 포함되지 않습니다; 대신 자식에만 일치합니다.

다른 트리 순회 메서드와 달리, 선택자 표현식은 .find()에 필수 매개변수입니다. 모든 자식 요소를 반환하려면 스플래시 선택자 '*'를 전달할 수 있습니다.

선택자 컨텍스트는 .find() 메서드에 의해 구현됩니다; 따라서 $('li.item-ii').find('li')는 $('li', 'li.item-ii')와 동일합니다.

jQuery 1.6에서는 주어진 jQuery 콜렉션 또는 요소를 사용하여 필터링할 수 있습니다. 위의 내장 목록, 우리는 먼저 이렇게 씁니다:

var $allListElements = $('li');

그런 다음 이 jQuery 객체를 find 메서드에 전달합니다:

$('li.item-ii').find( $allListElements );

직접 시험해 보세요

위 코드는 목록 II의 자식 요소에 속한 목록 요소를 포함한 jQuery 콜렉션을 반환합니다.

유사하게, 요소를 전달할 수도 있습니다:

var item1 = $('li.item-1')[0];
$('li.item-ii').find( item1 ).css('background-color', 'red');

직접 시험해 보세요

이번 호출의 결과는 프로젝트 1이 빨간 배경색으로 설정되었습니다.

jQuery 순회 참조 매뉴얼