목차
- parents() 예제 - <span>의 모든 조상 요소 반환
- parents() 정의
- parents() 구문
- parents() 예제 - 검색 범위 좁히기
- parents() 예제 - 여러 조상 반환
- parents() 예제 - 조상요소의 태그명 출력
parents() 예제 - <span>의 모든 조상 요소 반환
<style>
.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").parents().css({"color": "red", "border": "2px solid red"});
});
</script>
<body class="hz">body (고조부모)
<div>div (증조부모)
<ul>ul (조부모)
<li>li (부모)
<span>홈짱닷컴 Homzzang.com</span>
</li>
</ul>
</div>
</body>
결과보기
parents() 정의
선택 요소의 모든 상위 요소 반환.
1.
부모요소부터 시작해서 <html> 요소까지 탐색해감.
2.
매개변수가 비어 있으면, <body> 및 <html> 요소까지 탐색.
3.
DOM 따라 탐색하는 점에서 closest() 메서드와 유사하나, 다음과 같은 차이점 존재.
parents() 메서드
- 부모요소부터 시작
- DOM 트리 따라 탐색. 매개변수와 일치하는 모든 조상요소 반환.
- 반홛된 jQuery 객체 개수: 0 또는 1개 이상 요소
closest() 메서드
- 현재요소부터 시작
- DOM 트리 따라 탐색. 매개변수와 일치하는 첫번째 조상요소 반환.
- 반홛된 jQuery 객체 개수: 0 또는 1개 요소.
4.
parent() 메서드 - 선택요소의 직접 부모요소 반환.
parentsUntil() 메서드 - 두 인수 사이의 모든 상위 요소 반환.
parents() 구문
$(selector).parents(filter)
[매개변수]
filter
선택. 검색 범위 좁힐 선택자 표현식 지정.
※ 여러 조상 반환하려면, 콤마(,)로 구분해 나열.
parents() 예제 - 검색 범위 좁히기
<style>
.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").parents("ul").css({"color": "red", "border": "2px solid red"});
});
</script>
<body class="hz">body (고조부모)
<div>div (증조부모)
<ul>ul (조부모)
<li>li (부모)
<span>홈짱닷컴 Homzzang.com</span>
</li>
</ul>
</div>
</body>
결과보기
parents() 예제 - 여러 조상 반환
<style>
.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").parents("div, li").css({"color": "red", "border": "2px solid red"});
});
</script>
<body class="hz">body (고조부모)
<div>div (증조부모)
<ul>ul (조부모)
<li>li (부모)
<span>홈짱닷컴 Homzzang.com</span>
</li>
</ul>
</div>
</body>
결과보기
parents() 예제 - 조상요소의 태그명 출력
<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>
<body>
<div>
<p>
<span>홈짱닷컴 Homzzang.com</span>
</p>
</div>
</body>
