jQuery의 가장 가까운() 메서드
예시
<ul> 요소인 <span>의 첫 번째 조상을 반환합니다.
$(document).ready(function(){
$("span").closest("ul").css({"color": "red", "border": "2px solid red"});
});
결과:
body (great-great-grandparent)
div (great-grandparent)
ul (second ancestor - second grandparent) ul (first ancestor - first grandparent) - li (direct parent) span
정의 및 사용
가장 가까운() 메서드는 선택한 요소의 첫 번째 조상을 반환합니다.
조상은 부모, 조부모, 증조부모 등입니다.
DOM 트리: 이 메서드는 DOM 요소의 첫 번째 조상을 찾기 위해 현재 요소에서 문서의 루트 요소(<html>)까지 위쪽으로 탐색합니다.
이 메소드는 둘 다 DOM 트리를 순회한다는 점에서 parent() 와 유사합니다. 차이점은 다음과 같습니다.
가장 가까운()
- 현재 요소로 시작
- DOM 트리 위로 이동하고 전달된 표현식과 일치하는 첫 번째(단일) 조상을 반환합니다.
- 반환된 jQuery 객체에는 0개 또는 1개의 요소가 포함되어 있습니다.
부모()
- 상위 요소로 시작
- DOM 트리 위로 이동하고 전달된 표현식과 일치하는 모든 조상을 반환합니다.
- 반환된 jQuery 개체에 0개 이상의 요소가 포함되어 있습니다.
기타 관련 방법:
- parent() - 선택한 요소의 직접적인 부모 요소를 반환합니다.
- parentUntil() - 주어진 두 인수 사이의 모든 상위 요소를 반환합니다.
통사론
선택한 요소의 첫 번째 조상을 반환합니다.
$(selector).closest(filter)
DOM 컨텍스트를 사용하여 다음 내에서 DOM 트리를 조회하는 첫 번째 조상을 반환합니다.
$(selector).closest(filter,context)
| Parameter | Description |
|---|---|
| filter | Required. Specifies a selector expression, element or jQuery object to narrow down the ancestor search |
| context | Optional. A DOM element within which a matching element may be found |
직접 해보십시오 - 예
이 메서드는 현재 요소로 시작하기 때문에 <span>의 첫 번째 <span>을 검색하면 <span>이 반환됩니다.
컨텍스트로 DOM 요소를 전달합니다. 두 매개변수를 모두 사용하여 첫 번째 <ul> 요소를 검색할 컨텍스트로 DOM 요소를 전달합니다.