jQuery

jQuery 선택자(자식, 부모, 형제)

ktko 2018. 7. 17. 08:00

jQuery 선택자(자식, 부모, 형제)


jQuery의 자식 노드 선택하기


자식 노드란 특정 노드의 바로 아래에 위치하고 있는 노드를 말합니다. 하위 노드의 하위 노드는 자식 노드가 아닌 자손 노드라고 할 수 있습니다. 아래 예제를 보면 아이디 sample 의 자식 노드는 header, content, footer이 됩니다. header, content, footer 안에 자식 들은 sample의 자식이라고 할 수 없으며, 자손 노드라고 할 수 있습니다.

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
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
    <script>
        $(document).ready(function() {
            
        });
    </script>
    
<body>
    <div id="page"/>
        <div id="header">
            <h1>header 영역</h1>
        </div>
 
        <div id="content">
            <h1>content 영역</h1>
            <ul>
                <li> ktko1 </li>
                <li> ktko2 </li>
                <li> ktko3 </li>
                <li> ktko4 </li>
            </ul>
        </div>
 
        <div id="footer">
            <h1>footer 영역</h1>
        </div>
 
    </div>
</body>
 
</html>



자식 노드를 찾는 방법은 children() 메서드를 사용하며 children()으로 여러 자식들을 선택할 수 있습니다.

모든 자식 노드 찾기 : children()

특정 자식 노드만 찾기 : children("선택자")

첫 번째 자식 노드 찾기 : children().first()

마지막 자식 노드 찾기 : children.last()

n번째 자식 노드 찾기 : children.eq(index)




모든 자식 노드 찾기 : children()

특정 노드의 바로 하위에 위치한 모든 자식 노드를 찾고 싶을 때 children() 메서드를 사용합니다. 

children() 메서드는 모든 자손 노드가 아니라 바로 하위에 위치하는 자식 노드만을 구하는데 사용합니다. 예를 들어 page의 자식 노드를 구한다면 결과는 header, content, footer이 나옵니다.

1
$("#page").children()




특정 자식 노드만 찾기 : children("선택자")

children("선택자) 메서드를 사용하면 특정 자식 노드만을 찾을 수 있습니다.

예를 들어 page의 바로 하위자식 노드 중 test1 클래스가 적용된 노드를 찾아 css를 변경하려면 아래와 같습니다.

1
$("#page").children(".test").css("border", "4px solid");




첫 번째 자식 노드 찾기 

children().first()

children().eq(0)

children()(":first")

children()(":eq(0")

첫 번째 자식 노드를 찾는 방법은 위와 같이 4가지 방법이 있습니다. 예제는 생략하겠습니다.



마지막 노드 찾기

children().last()

children(":last")

children().eq($대상.children().length-1)

children(":eq("+$대상.children().length-1+")")

children().eq(-1)

children(":eq(-1)")

마지막 번째 자식 노드 찾는 방법 역시 위와 같은 여러가지 방법이 있고 주로 첫 번째, 두 번째 방법을 많이 사용하고 세 번째 네번째 방법은 이렇게도 접근할 수 있다는 걸 보여주기 위해 만든 것일 뿐 거의 사용하지 않습니다.




n번째 자식 노드 찾기 : children.eq(index), children(":eq(" + index + ")")

자식 노드 중 n 번째 자식 노드에 접근하는 방법 역시 위 2가지 방법이 있습니다. 



jQuery의 부모(조상) 노드 선택하기


부모 노드는 특정 노드를 감싸는 바로 위 상위 노드를 말합니다.  아래 예제에서  header, content, footer의 부모는 page가 됩니다(아이디 기준으로 말합니다.)  부모노드를 찾기 위해서는 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
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
    <script>
        $(document).ready(function() {
            
        });
    </script>
    
<body>
    <div id="page"/>
        <div id="header">
            <h1>header 영역</h1>
        </div>
 
        <div id="content">
            <h1>content 영역</h1>
            <ul>
                <li> ktko1 </li>
                <li> ktko2 </li>
                <li> ktko3 </li>
                <li> ktko4 </li>
            </ul>
        </div>
 
        <div id="footer">
            <h1>footer 영역</h1>
        </div>
 
    </div>
</body>
 
</html>



위의 예제에서  content의 부모를 찾아 css를 변경하려면 아래와 같이 사용 가능합니다.

1
$("#content").parent().css("border", "4px solid");



조상 노드를 찾을 수 있는 방법이 있는데 parents()를 사용하면 됩니다. (parent() 에서 끝에 s가 더 들어가네요)
ul tag의 조상인 id가 page인 div의 css를 변경하려면 아래와 같습니다.

1
$("ul").parents("#page").css("border", "4px solid");




jQuery의 형제 노드 선택하기


형제 노드를 찾는 것은 2가지 기준이 있습니다. 선택한 노드를 기점으로 이전 형제 노드를 찾을 것인가, 다음 형제 노드를 찾을 것인가 아래 예제가 있습니다. 중점적으로 보아야 할 것은 ul 밑에 li 태그들입니다. li태그들은 ul 태그 아래에 있는 같은 형제 노드들입니다.


먼저 메서드를 설명드리자면 아래와 같습니다.

prev() : 이전 형제 노드 찾기

prevAll() : 모든 이전 형제 노드 찾기

next() : 다음 형제 노드 찾기

nextAll() : 다음 형제 노드 찾기



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="page"/>
    <div id="header">
        <h1>header 영역</h1>
    </div>
 
    <div id="content">
        <h1>content 영역</h1>
        <ul>
            <li id="ktko1"> ktko1 </li>
            <li id="ktko2"> ktko2 </li>
            <li id="ktko3"> ktko3 </li>
            <li id="ktko4"> ktko4 </li>
        </ul>
    </div>
 
    <div id="footer">
        <h1>footer 영역</h1>
<ul>
            <li id="ktko1"> ktko1 </li>
            <li id="ktko2"> ktko2 </li>
            <li id="ktko3"> ktko3 </li>
            <li id="ktko4"> ktko4 </li>
        </ul>
    </div>
</div>



예제는 이전 노드를 찾는 것으로 끝내겠습니다. 이전이나 다음이나.. 똑같습니다..

아래 두 예제는 이전노드, 그리고 모든 이전노드를 찾는 것을 가리키는 예제입니다.

1
$("#ktko3").prev().css("border", "4px solid");



1
$("#ktko3").prevAll().css("border", "4px solid"); 



추가 예제

jQuery는 메서드를 실행하면 jQuery 객체가 리턴되는데 체이닝을 통해 아래와 같이 사용할 수 있습니다.

1
$("#content").next().children().css("border", "4px solid")



content의 다음 형제를 찾아 형제의 차식의 css를 변경하는 것입니다.


추가 정리

선택자를 이용하는 방법 중 첫 번째 자식 노드의 css를 변경할 때 아래와 같은 두 가지 방법이 있습니다. 어느 방법이 더 효율 적일까요?

1
2
3
$("#page").children(":first").css("border", "4px solid");
 
$("#page").children().first().css("border", "4px solid");



위에 두가지 경우만 놓고 비교하면 선택자를 이용한 풀이 방법이 효율적입니다. 왜냐하면 2번째 방법은 children()과 first() 두 가지 메서드를 이용하여 jQuery 객체를 리턴 받는 경우 이고, 첫 번째는 children() 메서드만 호출했기 때문입니다. jQuery 코드를 최적화하는 가장 쉽고 효과적인 방법은 jQuery 메서드를 사용할 때 가급적 적게 호출해주는 것입니다.





저작자표시 비영리