JQuery
3. JQuery 부모요소 가져오기
황민준
2022. 8. 30. 13:51
지정한 요소의 여러가지 함수를 이용하여 상위(부모)의 요소를 가져올 수 있다.
| 요소.parent() | 요소의 바로 위 부모를 가져온다. |
| 요소.parents("태그 혹은 셀렉터") | 지정한 요소부터 최상위까지 해당 태그 혹은 셀렉터의 부모를 가져온다. |
| 요소.parentsUntil("태그 혹은 셀렉터") | 지정한 요소와 해당 태그 혹은 셀렉터의 부모까지 사이의 요소들을 가져온다. (지정한 요소와 지정한 부모는 제외) |
| 요소.closest("태그 혹은 셀렉터") | 요소의 상위 중에서 제일 근접한 부모를 가져온다. |
*parent() / parents() / parentsUntil() 예시
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>문서 제목</title>
<style>
.ancestors *{
display: block;
border: 1px solid gray;
color: black;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<div class="ancestors">
<div>greate grand parent
<ul>grand parent
<li>parent
<span>SPAN</span>
</li>
</ul>
</div>
<div>grand parent
<p>parent
<span>SPAN</span>
</p>
</div>
</div>
</body>
<script>
//parent : 지정한 요소의 바로 위 부모 선택
$("span").parent().css("border","2px solid red");
//parents : 지정한 요소에서부터 시조까지 선택
//매개변수에 셀렉터를 지정하면 가장 조상의 셀렉터까지 찾는다.
$("span").parents("div").css("border","2px solid red");
//parentsUntil : 지정한 요소부터 지정한 조상까지 사이를 선택
// 당사자와 지정한 조상은 제외한다.
$("span").parentsUntil(".ancestors").css("border","2px solid blue");
</script>
</html>
*closest() 예시
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>문서 제목</title>
<style>
.ancestors * {
display: block;
border: 1px solid gray;
color: black;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<div class="ancestors">
<div>
<div>greate grand parent
<ul>grand parent
<li>parent
<span id="item">SPAN</span>
</li>
</ul>
</div>
</div>
</div>
</body>
<script>
//parents는 span에서부터 올라가면서 div만 찾는다
$("#item").parents('div').css("border","2px solid red");
//closest는 span에서 올라가면서 가장 먼저 만나는 div를 찾는다.
$("#item").closest('div').css("border","2px solid blue");
</script>
</html>