jQuery Traversing - Descendants

jQuery Traversing - Descendants

jQuery를 사용하면 DOM 트리 아래로 횡단하여 요소의 자손 요소들을 찾을 수 있습니다.

자손은 자식(child), 손자(grandchild), 증손자(great-grandchild) 등이 될 수 있습니다.

DOM 트리를 아래로 횡단하는 데 유용한 두 가지 jQuery 메서드는 다음과 같습니다.

• child()
• find()

children() 메서드는 선택한 요소의 모든 직계 자식 요소들을 반환합니다.

이 메서드는 DOM 트리 아래로 단일 수준만 횡단합니다.

다음 예제는 각 <div> 요소의 직계 자식인 모든 요소를 반환합니다.

    $(document).ready(function () {
      $("div").children().css({ "color": "blue", "border": "2px solid red" });
    })

매개 변수를 선택하여 자식요소 검색을 필터링 할 수도 있습니다.

다음 예제는 <div>의 직계 자식인 “first” 클래스명을 가진 모든 <p> 요소를 반환합니다.

    $(document).ready(function () {
      $("div").children("p.first").css({ "color": "blue", "border": "2px solid red" });
    });

find() 메서드는 선택한 요소의 마지막 하위 요소까지 아래에 있는 자손 요소들을 반환합니다.

다음 예제에서는 <div>의 자손 요소인 모든 <span> 요소들을 반환합니다.

  <script>
    $(document).ready(function () {
      $("div").find("span").css({ "color": "red", "border": "2px solid red" });
    });

다음의 예제는 <div>의 모든 자손 요소들을 반환합니다.

    $(document).ready(function () {
      $("div").find("*").css({ "color": "red", "border": "2px solid red" });
    });

모든 jQuery Traversing 메서드에 대한 전체 개요를 보려면 jQuery Traversing Reference로 이동하십시오.