<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").nextUntil("li.stop").css({"color": "red", "border": "2px solid red"});
});
</script>
<div style="width:500px;" class="hz">
<ul>ul (parent)
<li>li</li>
<li>li</li>
<li class="start">li class="start"</li>
<li>li</li>
<li>li</li>
<li>li</li>
<li class="stop">li class="stop"</li>
</ul>
</div>
결과보기
[filter 매개변수 있는 경우]
<style>
.siblings * {
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").nextUntil("li.stop", ".first").css({"color": "red", "border": "2px solid red"});
});
</script>
<div style="width:500px;" class="siblings">
<ul>ul (parent)
<li>li</li>
<li></li>
<li class="start">li class="start"</li>
<li class="first">li class="first"</li>
<li>li</li>
<li class="second">li class="second"</li>
<li class="stop">li class="stop"</li>
</ul>
</div>
결과보기
[여러 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(){
$("h2").nextUntil("h5", ".first,.second,.third").css({"color": "red", "border": "2px solid red"});
});
</script>
<div style="width:500px;" class="hz">
<div> 부모div
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
<p class="first">p class="first"</p>
<p>p</p>
<span class="second">span class="second"</span>
<span class="second">span class="second"</span>
<span>span</span>
<h3 class="third">h3 class="third"</h3>
<h5>h5</h5>
</div>
</div>
결과보기
[stop 매개변수가 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").nextUntil(DOM).css({"color": "red", "border": "2px solid red"});
});
</script>
<div style="width:500px;" class="hz">
<ul>ul (parent)
<li>li</li>
<li>li</li>
<li class="start">li class="start"</li>
<li>li</li>
<li>li</li>
<li>li</li>
<li class="stop">li class="stop"</li>
</ul>
</div>
결과보기
[stop 매개변수가 DOM이고, filter 매개변수가 있는 경우]
<style>
.siblings * {
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").nextUntil(DOM, ".first").css({"color": "red", "border": "2px solid red"});
});
</script>
<div style="width:500px;" class="siblings">
<ul>ul (parent)
<li>li</li>
<li>li</li>
<li class="start">li class="start"</li>
<li class="first">li class="first"</li>
<li>li</li>
<li class="first">li class="first"</li>
<li class="stop">li class="stop"</li>
</ul>
</div>
결과보기