-
[jQuery] 20. Ancestors - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:26
jQuery Traversing - Ancestors
조상(ancestor)는 부모, 할아버지, 증조-할아버지, 등등 입니다.
1. Traversing Up the DOM Tree
DOM 트리를 거슬러 올라가기 위한 3 가지 메소드가 있습니다:
- parent()
- parents()
- parentsUntil()
2. jQuery parent() Method
parent() 메소드는 선택된 요소의 직전 부모 요소를 반환합니다.
이 메소드는 DOM 트리의 단일 레벨만 거슬러 올라갑니다.
1234567891011121314151617181920212223242526272829303132333435363738394041<!DOCTYPE html><html><head><style>.ancestors * {display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style><script>$(document).ready(function(){$("span").parent().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 3. jQuery parents() Method
parents() 메소드는 선택된 요소의 모든 조상 요소를 반환합니다. 문서의 루트 요소(html)까지 올라갑니다.
1234$(document).ready(function(){$("span").parents();});cs 또한, 선택적으로 파라미터를 두어 조상 검색의 기준을 지정할 수 있습니다.
아래 예제는 <span> 요소의 모든 조상 중에 <ul> 요소를 반환하는 예제입니다:
123$(document).ready(function(){$("span").parents("ul");});cs 4. jQuery parentsUntil() Method
parentsUntil() 메소드는 두개의 주어진 인자 값 사이의 모든 조상을 반환합니다.
아래 예제는 <span>과 <div> 요소 사이의 모든 조상을 반환합니다:
123$(document).ready(function(){$("span").parentsUntil("div");});'Web > jQuery' 카테고리의 다른 글
[jQuery] 23. Filtering - jQuery 강좌 jQuery / CSE (0) 2015.06.13 [jQuery] 22. Siblings - jQuery 강좌 jQuery / CSE (0) 2015.06.13 [jQuery] 21. Descendants - jQuery 강좌 jQuery / CSE (0) 2015.06.13 [jQuery] 19. Traversing - jQuery 강좌 jQuery / CSE (0) 2015.06.13 [jQuery] 18. dimension - jQuery 강좌 jQuery / CSE (0) 2015.06.13 [jQuery] 17. CSS() - jQuery 강좌 jQuery / CSE (0) 2015.06.13
