jQuery의 closest() 메서드는 선택한 요소에서 시작해 DOM 트리를 따라 상위로 이동하면서, 지정한 조건과 일치하는 첫 번째 조상(ancestor) 요소를 반환합니다. 자기 자신부터 검사를 시작하므로, 선택한 요소 자체가 조건에 맞다면 해당 요소가 그대로 반환된다는 점도 기억해 두면 좋습니다.
문법(Syntax)
closest() 메서드의 기본 문법은 다음과 같습니다.
$(selector).closest(filter)
filter 매개변수에는 찾고자 하는 조상 요소를 지정하는 셀렉터 표현식이 들어갑니다.
예제(Example)
아래 예제는 jQuery closest() 메서드를 실제로 구현한 코드입니다. span 요소에서 출발하여 가장 가까운 ol 조상 요소를 찾은 뒤, 해당 요소에 배경색과 테두리 스타일을 적용합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo * {
display: block;
border: 2px solid blue;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span").closest("ol").css({"background-color": "orange", "color": "black", "border": "3px dashed orange"});
});
</script>
</head>
<body class="demo">body
<div style="width:600px;">
<ol>ol
<ol>ol
<ol>ol
<li>li
<span>span</span>
</li>
</ul>
</ul>
</ul>
</div>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
