목차
prevUntil() 예제 - 두 인수 사이의 이전 형제요소 반환 prevUntil() 정의 prevUntil() 구문 prevUntil() 예제 - filter 개수 1개인 경우 prevUntil() 예제 - filter 개수 여러 개 인 경우 prevUntil() 예제 - 매개변수에 DOM만 있는 경우 prevUntil() 예제 - 매개변수에 DOM과 filter가 둘 다 있는 경우
prevUntil() 예제 - 두 인수 사이의 이전 형제요소 반환
<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(){
$("li.start").prevUntil("li.stop").css({"color": "red", "border": "2px solid red"});
});
</script>
<div style="width:500px;" class="hz">
<ul>ul
<li class="stop">li class="stop" (포함 X)</li>
<li>li</li>
<li>li</li>
<li>li</li>
<li class="start">class="start" (포함 X)</li>
<li>li</li>
<li>li</li>
</ul>
</div>
결과보기
prevUntil() 정의
selector 와 stop 사이의 모든 형제 요소 중 filter 에 해당하는 요소 반환.
※ 형제 요소 : 동일 부모 요소 갖는 요소.
1.
매개변수가 모두 빈 경우, prevAll() 메서드와 마찬가지로 이전의 모든 형제 요소 반환.
2.
prev() 메서드 : 선택 요소의 이전 형제 요소 반환.
prevAll() 메서드 : 선택 요소의 모든 이전 형제 요소 반환.
prevUntil() 구문
$(selector ).prevUntil(stop,filter )
[매개변수]
stop
선택. 이전 일치 형제 요소에 대한 검색 중지 위치.
filter
선택. selector 와 stop 사이 형제 요소 중 해당 선택 요소 범위를 좁히기 위한 선택자 표현식. 쉼표 로 구분.
[반환값]
selector < filter 에 해당하는 요소 < stop
prevUntil() 예제 - 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(){
$("li.start").prevUntil("li.stop", ".my").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body>
<div style="width:500px;" class="hz">
<ul>ul
<li class="stop">li class="stop"</li>
<li class="my">li class="my"</li>
<li>li</li>
<li class="my">li class="my"</li>
<li class="start">li class="start"</li>
<li>li</li>
<li>li</li>
</ul>
</div>
결과보기
prevUntil() 예제 - filter 개수 여러 개 인 경우
<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(){
$("h4").prevUntil("h1", ".h2, .span, .p").css({"color": "red", "border": "2px solid red"});
});
</script>
<div style="width:500px;" class="hz">
<div>
<h1>h1 (포함 X)</h1>
<h2 class="h2">h2 class="h2"</h2>
<span>span</span>
<span class="span">span class="span"</span>
<span class="span">span class="span"</span>
<p>p</p>
<p class="p">p class="p"</p>
<p>p</p>
<h3>h3</h3>
<h4>h4 (포함 X)</h4>
<span class="span">span class="span"</span>
<p>p</p>
</div>
</div>
결과보기
prevUntil() 예제 - 매개변수에 DOM만 있는 경우
<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 DOM = document.getElementsByClassName("li.stop");
$("li.start").prevUntil(DOM).css({"color": "red", "border": "2px solid red"});
});
</script>
<div style="width:500px;" class="hz">
<ul>ul (parent)
<li class="stop">li class="stop" (포함 O)</li>
<li>li</li>
<li>li</li>
<li>li</li>
<li class="start">li class="start" (포함 X)</li>
<li>li</li>
<li>li</li>
</ul>
</div>
결과보기
PS. 위 예제 경우, DOM까지 포함되는 것에 주의.
prevUntil() 예제 - 매개변수에 DOM과 filter가 둘 다 있는 경우
<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 DOM = document.getElementsByClassName("li.stop");
$("li.start").prevUntil(DOM,".my").css({"color": "red", "border": "2px solid red"});
});
</script>
<div style="width:500px;" class="hz">
<ul>ul (parent)
<li class="stop">li class="stop" (포함 X)</li>
<li class="my"> class="my"</li>
<li>li</li>
<li class="my"> class="my"</li>
<li class="start"> class="start" (포함 X)</li>
<li>li</li>
<li>li</li>
</ul>
</div>
결과보기
