jQuery 순회 - 자손

자손은 자식, 손자, 조손 등입니다.

jQuery를 통해 DOM 트리를 내려다보며 요소의 자손을 찾을 수 있습니다.

DOM 트리 내려다보기

아래는 DOM 트리를 내려다보기 위해 사용되는 두 가지 jQuery 메서드입니다:

  • children()
  • find()

jQuery children() 메서드

children() 메서드는 선택된 요소의 모든 직접 자식 요소를 반환합니다.

이 메서드는 DOM 트리를 한 단계만 내려다보며 탐색합니다.

아래의 예제는 각 <div> 요소의 모든 직접 자식 요소를 반환합니다:

예제

$("document").ready(function(){
  $("div").children();
});

본인이 직접 시도해 보세요

자식 요소의 검색에 대해 선택적인 매개변수를 사용할 수도 있습니다.

아래의 예제는 클래스 이름이 "1"인 모든 <p> 요소를 반환하며, 이들은 <div>의 직접 자식 요소입니다:

예제

$("document").ready(function(){
  $("div").children("p.1");
});

본인이 직접 시도해 보세요

jQuery find() 메서드

find() 메서드는 선택된 요소의 자손 요소를 반환하며, 마지막 자손까지 내려가서 선택합니다.

아래의 예제는 <div>의 자손에 속한 모든 <span> 요소를 반환합니다:

예제

$("document").ready(function(){
  $("div").find("span");
});

본인이 직접 시도해 보세요

아래의 예제는 <div>의 모든 자손을 반환합니다:

예제

$("document").ready(function(){
  $("div").find("*"));
});

본인이 직접 시도해 보세요

jQuery 탐색 참조 가이드

모든 jQuery 탐색 메서드를 알고 싶다면, 우리의 jQuery 탐색 참조 가이드。