-
[jQuery] 21. Descendants - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:27
jQuery Traversing - Descendants
1. Traversing Down the DOM Tree
DOM 트리에서 내려가기 위한 2 가지 유용한 jQuery 메소드가 있습니다:
- children()
- find()
2. jQuery children() Method
children() 메소드는 선택된 요소의 모든 직후 자식들을 반환합니다.
이 메소드는 DOM 트리의 단일 레벨 아래만 항해합니다.
123456789101112131415161718192021222324252627282930313233<!DOCTYPE html><html><head><style>.descendants * {display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style><script>$(document).ready(function(){$("div").children().css({"color": "red", "border": "2px solid red"});});</script></head><body><div class="descendants" style="width:500px;">div (current element)<p>p (child)<span>span (grandchild)</span></p><p>p (child)<span>span (grandchild)</span></p></div></body></html>cs 또한, 자식 검색을 필터 파라미터를 두어서 검색 할 수도 있습니다.
아래 예제는 클래스 이름이 1인 모든 <p> 요소를 검색하는 예제입니다.
1234$(document).ready(function(){$("div").children("p.1");});cs 3. jQuery find() Method
find() 메소드는 선택된 요소의 모든 자식을 반환하는 메소드입니다. 아래 예제처럼 특정 파라미터를 주어 검색할 수도 있습니다.
123$(document).ready(function(){$("div").find("span");});cs 전체검색 예제는 아래와 같습니다.
'Web > jQuery' 카테고리의 다른 글
[jQuery] 24. AJAX - jQuery 강좌 jQuery / CSE (0) 2015.06.13 [jQuery] 23. Filtering - jQuery 강좌 jQuery / CSE (0) 2015.06.13 [jQuery] 22. Siblings - jQuery 강좌 jQuery / CSE (0) 2015.06.13 [jQuery] 20. Ancestors - 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
