순회(탐색)메소드 - Ancestors(조상)

 

Ancestors(조상) 메소드 :

선택 된 요소의 상위 요소들을 선택할 수 있는 메소드

 

$('요소명').parent()

- 선택 된 요소의 바로 위 상위 요소 리턴

 

$('요소명').parents([매개변수])

- 선택 된 요소의 모든 상위 요소 리턴

- 매개변수가 있으면 매개변수와 일치하는 부모만 리턴

 

$('요소명').parentsUntil(매개변수)

- 선택 된 요소부터 매개변수 요소까지 범위의 요소 리턴

 

 

예시 div상자 생성

 

<div class="wrap">

<div class="type">div(great-grandparent)

<ul>(grand parent)

<li>li (direct parent)

<span>span</span>

</li>

</ul>

</div>

<div class="type">div (grand parent)

<p>p (direct parent)

<span>span</span>

</p>

</div>

</div>

 

 

관계성이 눈에 잘 보이게 padding, margin, border 설정

스타일은 head 부분에 작성

 

<style>

.wrap * {

border : 1px solid lightgrey;

display : block;

padding : 5px;

margin : 15px;

color : gray;

}

 

.type {

width : 500px;

}

</style>

이렇게 생긴 곱상한 아이

 

부모 요소 선택 메소드들을 알아보자

 

<script>

$(document).ready(function(){

// parent()

// span 태그의 부모 

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

 

// parents()

// li 태그의 부모들 글씨는 blue 테두리는 핑꾸 점선으로

$("li").parents().css({"color":"blue"});

$("li").parents("div").css("border","2px dashed magenta")

 

//parentsUntil()

// span태그 부터 div태그 이전까지의 부모들

$("span").parentsUntil("div").css("background","lightgreen");

});

</script>

 

결과

각 부모덜의 영역 표시 확인 가능

li 태그에 parents() 로 선택해 테두리를 설정 했더니 눈에 보이지 않던 class="wrap" div도 보이기 시작함