목차
- parent() 예제 - span의 직접 부모요소 선택
- parent() 정의
- parent() 구문
- parent() 예제 - 각 span의 직접 부모요소 선택
- parent() 예제 - 검색 범위 좁히기
- parent() 예제 - 각 <p>요소의 직접 부모인 <div>요소 반환
- parent() 예제 - 지정 요소의 조상 요소들 태그명 반환
parent() 예제 - span의 직접 부모요소 선택
<!DOCTYPE html>
<html>
<head>
<style>
.hz, .hz * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 15px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span").parent().css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body class="hz">body (고조부모)
<div>div (증조부모)
<ul>ul (조부모)
<li>li (부모)
<span>span</span>
</li>
</ul>
</div>
</body>
</html>
결과보기
parent() 정의
지정 요소의 직접 부모 요소 반환.
1. cf.
parents() 메서드 - 조상요소 반환. (※ 검색필터링 지원)
parentUntil() 메서드 - 지정 범위의 조상 요소 반환
2. cf.
children() 메서드 - 직접 자식요소 반환.
find() 메서드 - 자손요소 반환. (※ 검색필터링 지원)
parent() 구문
$(selector).parent(filter)
[매개변수]
filter
선택. 선택 범위 좁히는 검색 필터링 지정.
parent() 예제 - 각 span의 직접 부모요소 선택
<!DOCTYPE html>
<html>
<head>
<style>
.hz, .hz * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 15px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span").parent().css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body class="hz">body (고조부모)
<div>div (증조부모)
<ul>ul (조부모)
<li>li (부모)
<span>span</span>
</li>
<li>li (부모)
<span>span</span>
</li>
</ul>
</div>
</body>
</html>
결과보기
parent() 예제 - 검색 범위 좁히기
<!DOCTYPE html>
<html>
<head>
<style>
.hz, .hz * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 15px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){ $("span").parent("li:first").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body class="hz">body (고조부모)
<div>div (증조부모)
<ul>ul (조부모)
<li>li (부모)
<span>span</span>
</li>
<li>li (부모)
<span>span</span>
</li>
</ul>
</div>
</body>
</html>
결과보기
parent() 예제 - 각 <p>요소의 직접 부모인 <div>요소 반환
<!DOCTYPE html>
<html>
<head>
<style>
div {border:1px solid black;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").parent("div").css("background-color", "yellow");
});
</script>
</head>
<body>
<p>홈짱닷컴 Homzzang.com</p>
<div>
<p>HTML</p>
<span>CSS</span>
<p>JS</p>
</div><br>
<div>
<p>PHP</p>
<span>SQL</span>
<p>서버관리</p>
</div>
<p>홈페이지 제작관리</p>
</body>
</html>
결과보기
parent() 예제 - 지정 요소의 조상 요소들 태그명 반환
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var ancestors = $("span").parents().map(function(){
return this.tagName;}).get().join(", ");
$("span").after("<h2>" + ancestors + "<h2>");
});
</script>
</head>
<body>
<div>
<p>
<span>홈짱닷컴 Homzzang.com</span>
</p>
</div>
</body>
</html>
결과보기 (결과값: P, DIV, BODY, HTML)
