순회(탐색)메소드 - Descendants(자손,후손)

Descendants(자손, 후손) 메소드 : 선택 된 요소의 하위 요소들을 선택할 수 있는 메소드

 

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

- 선택 된 요소의 모든 자식 객체 리턴

- 매개변수가 있으면 매개변수와 일치하는 자식 객체만 리턴

 

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

- 선택 된 요소의 인자와 일치하는 모든 후손 객체 리턴

 

 

예시 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(){

// 이번엔 지정할 스타일을 변수에 담아봄

var style1 = {"color" : "red", "border" : "2px solid red"};

var style2 = {"color" : "blue", "border" : "2px solid blue"};

var style3 = {"color" : "green", "border" : "2px solid green"};

var style4 = {"color" : "orange", "border" : "2px solid orange"};

 

// children()

// .wrap div 밑의 두개의 div

$(".wrap").children().css(style1); 

 

// .wrap div 밑의 두개의 div의 자손인 ul과 p

$(".wrap").children().children().css(style2); 

 

// .wrap div 밑의 두개의 div의 자손 중 ul만

$(".wrap").children().children("ul").css(style3); 

 

// find()

// span태그만

$(".wrap").find("span").css(style4);

});

</script>

원래 위 div상자 안에 ul태그도 blue 스타일을 적용했었지만

바로 아래줄에서 div의 자손 중 ul만 선택하여 green으로 적용한 것이 덮어써졌다