출처 : https://www.w3schools.com 사이트의 내용을 공부하며 정리하고 있다.


What is Traversing?

jQuery traversing은 HTML 요소들이 다른 요소들과 어떤 관계에 있는지를 보여준다. 

그림으로 보면 이해가 더 쉽다.


https://www.w3schools.com/jquery/jquery_traversing.asp


정리 : div > ul > li > span or b


parent, child, ancestor, descendant 과 같은 단어가 나오는데 각 html 요소의 관계를 쉽게 정의할 수 있다. 

순서대로 부모, 자식, 조상, 자손 정도로 해석하면 무난하다.


<div> 요소는 <ul>의 부모이고 그 안의 모든 것들의 조상이다.

<ul>   요소는 <li>의 부모이자 <div>의 자식이다.

<li>    요소는 <span>의 부모이자 <ul>의 자식이다.

<span>요소는 <li>의 자식이자 <ul>, <div>의 자손이다.  

<b>    요소는 <li>의 자식이자 <ul>, <div>의 자손이다.  


- Ancestors


- DOM tree를 위해 여러 유용한 메소드를 사용할 수 있다.

  • parent()
  • parents()
  • parentsUntil()

jQuery parent 메소드

-> parent( ) 메소드는 선택된 요소의 부모 요소를 리턴한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
<style>
.ancestors * { 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("span").parent().css({"color": "red", "border": "2px solid red"});
    $("span").parent().parent().css({"color": "red", "border": "2px solid blue"});
    $("span").parent().parent().parent().css({"color": "red", "border": "2px solid green"});
});
</script>
</head>
<body>
 
<div class="ancestors">
  <div style="width:500px;">div (great-grandparent)
    <ul>ul (grandparent)  
      <li>li (direct parent)
        <span>span</span>
      </li>
    </ul>   
  </div>
 
  <div style="width:500px;">div (grandparent)   
    <p>p (direct parent)
        <span>span</span>
      </p> 
  </div>
</div>
 
</body>
</html>
 
cs

결과 : parent를 계속 이어붙이는 건 좋은 코드는 아니지만 parent의 역할을 이해하기 위해

파란색, 초록색 효과를 줘서 알아보았다. 

 

모든 부모 요소에 같은 효과를 주고 싶다면 parents( ) 메소드를 사용하면 된다. 

<!DOCTYPE html>
<html>
<head>
<style>
.ancestors * { 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("span").parents().css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body>
<div class="ancestors">
  <div style="width:500px;">div (great-grandparent)
    <ul>ul (grandparent)  
      <li>li (direct parent)
        <span>span</span>
      </li>
    </ul>   
  </div>
  <div style="width:500px;">div (grandparent)   
    <p>p (direct parent)
        <span>span</span>
      </p> 
  </div>
</div>
</body>
</html>


만약 특정 조건을 주고 싶다면 parents( ) 메소드 괄호 안에 조건을 추가하면 된다.

p 태그와 li 태그에만 효과를 주도록 한 예제이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
<style>
.ancestors * { 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("span").parents("li, p").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body>
<div class="ancestors">
  <div style="width:500px;">div (great-grandparent)
    <ul>ul (grandparent)  
      <li>li (direct parent)
        <span>span</span>
      </li>
    </ul>   
  </div>
  <div style="width:500px;">div (grandparent)   
    <p>p (direct parent)
        <span>span</span>
      </p> 
  </div>
</div>
</body>
</html>
cs


jQuery parentsUntil() 메소드

-> parentsUntil() 메소드는 두 주어진 인수 사이의 조상 요소들을 모두 리턴한다.

예제 소스를 보는 게 이해가 편할 듯 하다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
<style>
.ancestors * { 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("span").parentsUntil("body").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
 
<body class="ancestors"> body (great-great-grandparent)
  <div style="width:500px;">div (great-grandparent)
    <ul>ul (grandparent)  
      <li>li (direct parent)
        <span>span</span>
      </li>
    </ul>   
  </div>
</body>
 
</html>
 
cs

결과 : span 에서 body 사이의 li, ul, div에 css효과를 주었다. line 16을 수정하면 된다.



저작자표시 비영리 변경금지

'문돌이의 IT > jQuery' 카테고리의 다른 글

jQuery Traversing 가로지르기? 횡단하기? (3) Siblings  (0) 2017.08.24
jQuery Traversing 가로지르기? 횡단하기? (2) Descendants  (0) 2017.08.23
jQuery Dimensions 면적, 치수  (0) 2017.08.20
jQuery css() 메소드  (0) 2017.08.19
jQuery Get and Set CSS 클래스들  (0) 2017.08.15

+ Recent posts

티스토리툴바