목차
parent() : 직접적인 부모 요소 찾기 parents() : 모든 조상 요소 찾기 parents("검색필터링") : 검색필터링으로 걸러낸 조상 요소 찾기 parentsUntil() : 특정 요소 사이의 조상 요소 찾기
parent() : 직접적인 부모 요소 찾기
<!DOCTYPE html>
<html>
<head>
<style>
.homzzang {
border:1px solid blue;
padding:10px;
}
.homzzang .hz1, .homzzang .hz2 {
width:300px;
margin:10px auto;
}
.homzzang * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span").parent ().css({"color": "red", "border": "5px solid red"}); // span의 직접 부모만
});
</script>
</head>
<body>
<div class="homzzang">
<div class="hz1">div (증조부모)
<ul>ul (조부모)
<li>li (부모)
<span>span (나)</span>
</li>
</ul>
</div>
<div class="hz2">div (조부모)
<p>p (부모)
<span>span (나)</span>
</p>
</div>
</div>
</body>
</html>
결과 보기
parents() : 모든 조상 요소 찾기
<!DOCTYPE html>
<html>
<head>
<style>
.homzzang {
border:1px solid blue;
padding:10px;
}
.homzzang .hz1, .homzzang .hz2 {
width:300px;
margin:10px auto;
}
.homzzang * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span").parents ().css({"color": "red", "border": "5px solid red"}); // span의 모든 조상
});
</script>
</head>
<body>
<div class="homzzang">
<div class="hz1">div (증조부모)
<ul>ul (조부모)
<li>li (부모)
<span>span (나)</span>
</li>
</ul>
</div>
<div class="hz2">div (조부모)
<p>p (부모)
<span>span (나)</span>
</p>
</div>
</div>
</body>
</html>결과 보기
parents("검색필터링") : 검색필터링으로 걸러낸 조상 요소 찾기
<!DOCTYPE html>
<html>
<head>
<style>
.homzzang {
border:1px solid blue;
padding:10px;
}
.homzzang .hz1, .homzzang .hz2 {
width:300px;
margin:10px auto;
}
.homzzang * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span").parents (" ul" // 조상 중 ul만
});
</script>
</head>
<body>
<div class="homzzang">
<div class="hz1">div (증조부모)
<ul>ul (조부모)
<li>li (부모)
<span>span (나)</span>
</li>
</ul>
</div>
<div class="hz2">div (조부모)
<p>p (부모)
<span>span (나)</span>
</p>
</div>
</div>
</body>
</html>결과 보기
parentsUntil() : 특정 요소 사이의 조상 요소 찾기
<!DOCTYPE html>
<html>
<head>
<style>
.homzzang {
border:1px solid blue;
padding:10px;
}
.homzzang .hz1, .homzzang .hz2 {
width:300px;
margin:10px auto;
}
.homzzang * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span ").parentsUntil ("div ").css({"color": "red", "border": "5px solid red"}); // span과 div 사이
});
</script>
</head>
<body>
<div class="homzzang">
<div class="hz1">div (증조부모)
<ul>ul (조부모)
<li>li (부모)
<span>span (나)</span>
</li>
</ul>
</div>
<div class="hz2">div (조부모)
<p>p (부모)
<span>span (나)</span>
</p>
</div>
</div>
</body>
</html>
결과 보기
