closest 메서드

closest 메서드는 메서드의 매개변수로 주어진 선택자에 맞는 가장 가까운 상위 요소를 찾습니다. 이 메서드는 parent 메서드와 유사합니다. 검색은 다음과 같이 진행됩니다: 먼저 요소의 직접적인 상위 요소를 확인하고, 그 다음 조상, 그 조상 등으로 루트 요소(즉, html 태그)까지 확인합니다.

구문

선택자는 DOM 요소, 표현식 또는 jQuery 객체일 수 있습니다. 검색은 매개변수로 전달된 DOM 요소에서 시작됩니다:

.closest(선택자);

두 번째 매개변수로 DOM 요소도 전달할 수 있으며, 그러면 검색은 해당 요소 내에서 수행됩니다:

.closest(선택자, 컨텍스트);

예제

#test ID를 가진 요소에 대해 www 클래스를 가진 가장 가까운 상위 요소를 찾고 해당 요소의 시작 부분에 '!' 텍스트가 있는 문단을, 끝 부분에는 '?' 텍스트가 있는 문단을 삽입해 보겠습니다:

<div>
	<div class="www">
		<div>
			<p id="test">text</p>
		</div>
	</div>
</div>

$('#test').closest('.www').append('<p>?</p>').prepend('<p>!</p>');

HTML 코드는 다음과 같이 보일 것입니다:

<div>
	<div class="www">
		<p>!</p>
		<div>
			<p id="test">text</p>
		</div>
		<p>?</p>
	</div>
</div>

함께 보기

parent 메서드,
요소의 직접적인 상위 요소를 가져올 수 있게 합니다
parents 메서드,
요소의 모든 상위 요소를 가져올 수 있게 합니다
parentsUntil 메서드,
지정된 상위 요소까지의 모든 상위 요소를 가져올 수 있게 합니다
JavaScript closest 메서드,
가장 가까운 상위 요소를 가져올 수 있게 합니다