목차
jQuery Traversing - Ancestors
- description : jQuery Traversing - Ancestors
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-04-19
Source of the article
jQuery Traversing - Ancestors
jQuery를 사용하면 DOM 트리를 횡단하여 요소의 조상(ancestors)을 찾을 수 있습니다.
조상(ancestor)은 부모(parent), 조부모(grandparent), 증조부모(great-grandparent) 등이 될 수 있습니다.
Traversing Up the DOM Tree
DOM 트리를 위로 횡단하는 데 유용한 세 가지 jQuery 메서드는 다음과 같습니다.
parent()parents()parentUntil()
jQuery parent() Method
parent() 메서드는 선택한 요소의 직접 부모 요소(direct parent element)를 반환합니다.
이 메서드는 DOM 트리의 단일 수준만 회단합니다.
다음 예제는 각 <span> 요소의 직접 부모 요소를 반환합니다:
예제
$(document).ready(function () { $("span").parent().css({ "color": "red", "border": "2px solid crimson" }); });
jQuery parents() Method
parent() 메서드는 선택한 요소의 (문서의 루트 요소 (<html>)까지 위에 있는) 모든 조상(ancestor) 요소들을 반환합니다.
다음 예제는 모든 <span> 요소의 모든 조상(ancestors) 요소들을 반환합니다.
예제
$(document).ready(function () { $("span").parents().css({ "color": "red", "border": "2px solid red" }); });
매개 변수를 선택하여 조상 검색을 필터링 할 수도 있습니다.
다음 예는 <ul> 요소인 모든 <span> 요소의 모든 조상들을 반환합니다.
예제
$(document).ready(function () { $("span").parents("ul").css({ "color": "red", "border": "2px solid red" }); });
jQuery parentsUntil() Method
parentUntil() 메서드는 주어진 두 인수(arguments) 사이의 모든 조상 요소들을 반환합니다.
다음 예에서는 <span> 및 <div> 요소 사이의 모든 조상(ancestors) 요소들을 반환합니다.
예제
$(document).ready(function () { $("span").parentsUntil("div").css({ "color": "red", "border": "2px solid red" }); });
jQuery Traversing Reference
모든 jQuery Traversing 메서드에 대한 전체 개요를 보려면 jQuery Traversing Reference로 이동하십시오.
