목차
- parentsUntil() 예제 - 지정 조상 요소 사이의 모든 요소
- parentsUntil() 정의
- parentsUntil() 구문
- parentsUntil() 예제 - filter 매개변수에 1개 요소 지정
- parentsUntil() 예제 - filter 매개변수에 여러 요소 지정
- parentsUntil() 예제 - DOM 이용해 stop 매개변수 지정
- parentsUntil() 예제 - stop(DOM) / filter(1개) 경우
parentsUntil() 예제 - 지정 조상 요소 사이의 모든 요소
<style>
.hz * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span").parentsUntil("div").css({"color": "red", "border": "2px solid red"});
});
</script>
<body class="hz"> body
<div style="width:300px;">div
<ul>ul
<li>li
<span>span</span>
</li>
</ul>
</div>
</body>
결과보기
parentsUntil() 정의
현재 선택자(selector)와 지정 조상 선택자 (stop) 사이의 조상 요소 선택.
1.
지정 조상 선택자 (stop) 찾을 때가지 루트 요소까지 거슬러 올라가 찾음.
2.
두 매개변수가 모두 빈 경우, 이 메서드는 모든 상위 요소 반환.
즉, parents() 메서드와 동일하게 작동.
3. cf. 관련 메서드
parentsUntil() 구문
$(selector).parentsUntil(stop,filter)
[매개변수]
stop
선택. 지정 조상 요소.
※ 요소명이나 jQuery 선택자 표현식 등이 올 수 있음.
※ (selecor < 선택요소 < stop) 범위 요소가 선택됨.
filter
선택. 검색 범위를 좁히기 위한 선택자 표현식 지정.
※ 여러 조상 반환하려면, 쉼표( , )로 구분해 나열.
parentsUntil() 예제 - filter 매개변수에 1개 요소 지정
[예제] - span과 div 요소 사이의 ul 요소만 선택
<style>
.hz * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span").parentsUntil("div", "ul").css({"color": "red", "border": "2px solid red"});
});
</script>
<body class="hz"> body
<div style="width:300px;">div
<ul>ul
<li>li
<span>span</span>
</li>
</ul>
</div>
</body>
결과보기
parentsUntil() 예제 - filter 매개변수에 여러 요소 지정
[예제] - span과 body 사이 요소 중, (p / li / div) 요소 선택
<style>
.hz * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span").parentsUntil("body", "p, li, div").css({"color": "red", "border": "2px solid red"});
});
</script>
<body class="hz"> bod
<div style="width:300px;">div
<ul>ul
<li>li
<p>p
<span>span</span>
</p>
</li>
</ul>
</div>
</body>
결과보기
parentsUntil() 예제 - DOM 이용해 stop 매개변수 지정
<style>
.hz * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var to = document.getElementsByClassName("to");
$(".from").parentsUntil(to).css({"color": "red", "border": "2px solid red"});
});
</script>
<body class="hz"> body
<div style="width:300px;" class="to">div
<ul>ul
<li>li
<span class="from">span</span>
</li>
</ul>
</div>
</body>
결과보기
parentsUntil() 예제 - stop(DOM) / filter(1개) 경우
<style>
.hz * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var to = document.getElementsByClassName("to");
$(".from").parentsUntil(to, "ul").css({"color": "red", "border": "2px solid red"});
});
</script>
<body class="hz"> body
<div style="width:300px;" class="to">div
<ul>ul
<li>li
<span class="from">span</span>
</li>
</ul>
</div>
</body>
결과보기
