jQuery 입문 | 요소의 탐색 | 상위 요소의 탐색 .parents() .closest()

상위(ancestor:조상) 요소의 탐색

DOM 트리에서 특정 요소의 부모(parent) 요소를 포함한 상위의 요소를 탐색하기 위한 메소드는 다음과 같다.

.parent() 메소드

.parent() 메소드는 선택한 요소의 부모(parent) 요소를 선택한다.
이때, 선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 부모 요소만을 선택할 수도 있다.

아래와 같이 HTML 요소가 있을 때,

<div>div (할아버지)
  <ul>ul (부모)
    <li>li (자식)
        <span>span (손자)</span>
    </li>
  </ul>
</div>

<ul> 요소의 부모 요소를 선택하여, 해당 요소의 CSS 스타일을 변경한다.

$("ul").parent().css({"border": "2px solid red"});

.css() 메소드는 선택한 요소에 인수로 전달받은 스타일을 설정한다.

코드 실행

.parents() 메소드

.parents() 메소드는 선택한 요소의 상위(ancestor:조상) 요소를 모두 선택한다.
이때 선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 상위 요소만을 선택할 수도 있다.

<ul>요소의 상위 요소 중에서 <div>요소를 모두 선택하여, 해당 요소의 CSS 스타일을 변경한다.

$("ul").parents("div").css({"border": "2px solid red"});

코드 실행

.parentsUntil() 메소드

.parentsUntil() 메소드는 선택한 요소의 조상 요소 중에서 전달받은 선택자에 해당하는 요소 바로 이전까지의 요소만을 모두 선택한다.
이때 선택자를 인수로 전달하지 않으면, .parent() 메소드와 같이 선택한 요소의 조상 요소를 모두 선택한다.

<li>요소의 상위 요소 중에서 첫 번째 <div>요소의 바로 이전까지의 요소를 모두 선택하여, 해당 요소의 CSS 스타일을 변경한다.

$("li").parentsUntil("div").css({"border": "2px solid red"});

코드 실행

.closest() 메소드

.closest() 메소드는 자신을 포함한 상위 요소 중에서 전달받은 선택자에 해당하는 요소의 집합에서 가장 첫 번째 요소를 선택한다.
이 메소드가 요소의 탐색을 방식은 .parents() 메소드와 비슷하지만, 해당 요소의 상위 요소뿐만 아니라 해당 요소 자신까지도 포함하여 탐색한다는 점이 다르다.

아래와 같이 HTML 요소가 있을 때,

<div>div (할아버지)
  <ul>ul (부모)
    <li class="me">li (자식)
        <span>span (손자)</span>
    </li>
  </ul>
</div>

// 클래스 “me"을 가진 요소 자신과 상위 요소 중에서 첫 번째 <li>요소를 선택하여, 해당 요소의 CSS 스타일을 변경한다.

$(".me").closest("li").css({"border": "2px solid red"});

이 예제에서는 선택한 클래스 “me"을 가진 요소가 <li> 요소이기에 본인만 css 스타일이 변경된다.

코드 실행