category jQuery 2018. 7. 17. 08:00 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="//code.jquery.com/jquery-3.2.1.min.js"></script> </head> <script> $(document).ready(function() {
}); </script> <body> <div id="page"/> <div id="header"> <h2>header 영역</h2> </div> <div id="content"> <h2>content 영역</h2> <ul>
<li> ktko1 </li> <li> ktko2 </li> <li> ktko3 </li> <li> ktko4 </li> </ul> </div> <div id="footer"> <h2>footer 영역</h2> </div>
</div> </body> </html>jQuery 선택자(자식, 부모, 형제)
자식 노드를 찾는 방법은 children() 메서드를 사용하며 children()으로 여러 자식들을 선택할 수 있습니다.
모든 자식 노드 찾기 : children()
특정 자식 노드만 찾기 : children("선택자")
첫 번째 자식 노드 찾기 : children().first()
마지막 자식 노드 찾기 : children.last()
n번째 자식 노드 찾기 : children.eq(index)
모든 자식 노드 찾기 : children()
특정 노드의 바로 하위에 위치한 모든 자식 노드를 찾고 싶을 때 children() 메서드를 사용합니다.
children() 메서드는 모든 자손 노드가 아니라 바로 하위에 위치하는 자식 노드만을 구하는데 사용합니다. 예를 들어 page의 자식 노드를 구한다면 결과는 header, content, footer이 나옵니다.
특정 자식 노드만 찾기 : children("선택자")
children("선택자) 메서드를 사용하면 특정 자식 노드만을 찾을 수 있습니다.
예를 들어 page의 바로 하위자식 노드 중 test1 클래스가 적용된 노드를 찾아 css를 변경하려면 아래와 같습니다.
$("#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="//code.jquery.com/jquery-3.2.1.min.js"></script> </head> <script> $(document).ready(function() { }); </script> <body> <div id="page"/> <div id="header"> <h2>header 영역</h2> </div> <div id="content"> <h2>content 영역</h2> <ul> <li> ktko1 </li> <li> ktko2 </li> <li> ktko3 </li> <li> ktko4 </li> </ul> </div> <div id="footer"> <h2>footer 영역</h2> </div> </div> </body> </html> |
위의 예제에서 content의 부모를 찾아 css를 변경하려면 아래와 같이 사용 가능합니다.
$("#content").parent().css("border", "4px solid"); |
조상 노드를 찾을 수 있는 방법이 있는데 parents()를 사용하면 됩니다. (parent() 에서 끝에 s가 더 들어가네요)
ul tag의 조상인 id가 page인 div의 css를 변경하려면 아래와 같습니다.
$("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"> <h2>header 영역</h2> </div> <div id="content"> <h2>content 영역</h2> <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"> <h2>footer 영역</h2> <ul> <li id="ktko1"> ktko1 </li> <li id="ktko2"> ktko2 </li> <li id="ktko3"> ktko3 </li> <li id="ktko4"> ktko4 </li> </ul> </div> </div> |
예제는 이전 노드를 찾는 것으로 끝내겠습니다. 이전이나 다음이나.. 똑같습니다..
아래 두 예제는 이전노드, 그리고 모든 이전노드를 찾는 것을 가리키는 예제입니다.
$("#ktko3").prev().css("border", "4px solid"); |
$("#ktko3").prevAll().css("border", "4px solid"); |
추가 예제
jQuery는 메서드를 실행하면 jQuery 객체가 리턴되는데 체이닝을 통해 아래와 같이 사용할 수 있습니다.
$("#content").next().children().css("border", "4px solid") |
content의 다음 형제를 찾아 형제의 차식의 css를 변경하는 것입니다.
추가 정리
선택자를 이용하는 방법 중 첫 번째 자식 노드의 css를 변경할 때 아래와 같은 두 가지 방법이 있습니다. 어느 방법이 더 효율 적일까요?
$("#page").children(":first").css("border", "4px solid"); $("#page").children().first().css("border", "4px solid"); |
위에 두가지 경우만 놓고 비교하면 선택자를 이용한 풀이 방법이 효율적입니다. 왜냐하면 2번째 방법은 children()과 first() 두 가지 메서드를 이용하여 jQuery 객체를 리턴 받는 경우 이고, 첫 번째는 children() 메서드만 호출했기 때문입니다. jQuery 코드를 최적화하는 가장 쉽고 효과적인 방법은 jQuery 메서드를 사용할 때 가급적 적게 호출해주는 것입니다.