<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>요소탐색(순회)메소드 조상</title>
<script src="https://code.jquery.com/jquery-3.7.1.slim.js"></script>
<style>
.wrap, .wrap * {
border: 1px solid lightgray;
color: gray;
display: block;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<h1>탐색(순회) 메서드</h1>
<h3>* 조상 메서드 : 기준이 되는 요소의 상위요소들을 선택할 수 있는 메서드</h3>
<p>
<h4>- $('선택자').parent()</h4>
선택된 요소의 바로 위 상위(부모)요소 하나만 선택
<h4>- $('선택자').parents()</h4>
선택된 요소의 모든 상위요소들 선택
<h4>- $('선택자').parents('선택자')</h4>
선택된 요소의 모든 상위요소들 중에서 제시한 값과 일치하는 상위요소들만 선택
<h4>- $('선택자').parentsUntil('선택자')</h4>
선택된 요소부터 제시한 값까지의 모든 상위요소들 선택
</p>
<div class="wrap">
<div>div(증조할머니)
<ul>ul(할머니)
<li>li(엄마)
<span>span(나)</span>
</li>
</ul>
</div>
<div>div(할아버지)
<p>p(아빠)
<span>span(나)</span>
</p>
</div>
</div>
<script>
$(() => {
$('span').parent().css({color: 'red', border: '2px solid red'});
$('li').parents().css('color', 'blue');
$('li').parents('div').css('border', '2px dashed magenta');
// .parentsUntil('선택자') : 선택자 이전까지만 바뀜
$('span').parentsUntil('div').css('color', 'pink');
})
</script>
</body>
</html>