목차
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>
최신댓글