JQuery parent, parents, parentsUntil, children, find 정리

프로그래밍 언어/JQuery

펌킨황 2023. 6. 17. 18:03

JQuery Ancestors, Descendants API

JQuery의 Ancestors, Descendants API의 parent(), parents(), parentsUntil(), children(), find() 메서드는 특히 DOM 요소의 부모, 자식 요소를 찾을 때 유용하게 사용됩니다.

예제를 보겠습니다.

parent() 메서드는 선택한 요소의 부모 요소를 반환합니다.

<div>
  <p>부모 요소</p>
  <span>자식 요소</span>
</div>

span 요소의 부모 요소를 찾기 위해서는 다음과 같은 코드를 작성할 수 있습니다.

$("span").parent();

이 코드는 span 요소의 부모인 div 요소를 반환합니다.

parent() 메서드는 선택한 요소의 부모 중 첫 번째 요소만 반환하게 되죠. => (div 반환)

parents() 메서드는 선택한 요소의 모든 부모 요소를 반환합니다.

<div>
  <p>부모 요소</p>
  <span>
    <em>조부모 요소</em>
  </span>
</div>

em 요소의 모든 부모 요소를 찾기 위해서는 다음과 같은 코드를 작성할 수 있습니다.

$("em").parents();

em 요소의 모든 부모인 span과 div 요소를 반환합니다. parents() 메서드는 선택한 요소의 모든 부모 요소를 반환합니다.

parentsUntil() 메서드는 선택한 요소와 일치하는 요소 이전의 모든 부모 요소를 반환합니다.

<div>
  <p>부모 요소</p>
  <span>
    <em>조부모 요소</em>
  </span>
</div>

em 요소와 div 요소 사이에 있는 모든 부모 요소를 찾기 위해서는 다음과 같은 코드를 작성할 수 있습니다.

$("em").parentsUntil("div");

선택한 요소와 일치하는 요소 이전의 모든 부모 요소를 반환합니다. => (em 요소와 div 요소 사이에 있는 span 요소)

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

<div>
  <p>첫 번째 자식 요소</p>
  <span>두 번째 자식 요소</span>
</div>

div 요소의 모든 자식 요소를 찾기 위해서는 다음과 같은 코드를 작성할 수 있습니다.

$("div").children();

div 요소의 모든 자식인 p 요소와 span 요소를 반환합니다. children() 메서드는 선택한 요소의 모든 자식 요소를 반환합니다.

find() 메서드는 선택한 요소의 하위 요소 중에서 특정한 조건을 만족하는 모든 하위 요소를 반환합니다.

<div>
  <p>첫 번째 자식 요소</p>
  <span>두 번째 자식 요소</span>
</div>

div 요소 내에서 p 요소를 찾기 위해서는 다음과 같은 코드를 작성할 수 있습니다.

$("div").find("p");

이 코드는 div 요소 내에서 p 요소를 반환합니다. find() 메서드는 선택한 요소의 하위 요소 중에서 특정한 조건을 만족하는 모든 하위 요소를 반환합니다.