목차
- siblings() : 모든 형제요소 반환
- siblings("검색필터링") : 검색필터링에 해당하는 형제요소 반환
- prev() / next() - 바로 이전/다음 형제요소 반환
- prevAll() / nextAll() - 바로 이전/다음 모든 형제요소 반환
- prevUntil() / nextUntil() - 지정 인수 사이의 형제요소 반환
siblings() : 모든 형제요소 반환
<style>
.homzzang * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("h2").siblings().css({"color": "red", "border": "2px solid red"});
});
</script>
<div class="homzzang">
<div>div (부모)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
</div>
</div>
결과 보기
siblings("검색필터링") : 검색필터링에 해당하는 형제요소 반환
<style>
.homzzang * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("h2").siblings("p").css({"color": "red", "border": "2px solid red"});
});
</script>
<div class="homzzang">
<div>div (부모)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
</div>
</div>
결과 보기
prev() / next() - 바로 이전/다음 형제요소 반환
<style>
.homzzang * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("h2").next().css({"color": "red", "border": "2px solid red"});
$("h2").prev().css({"color": "blue", "border": "2px solid blue"});
});
</script>
<div class="homzzang">
<div>div (parent)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
</div>
</div>
결과 보기
prevAll() / nextAll() - 바로 이전/다음 모든 형제요소 반환
<style>
.homzzang * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("h2").nextAll().css({"color": "red", "border": "2px solid red"});
$("h2").prevAll().css({"color": "blue", "border": "2px solid blue"});
});
</script>
<div class="homzzang">
<div>div (parent)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
</div>
</div>
결과 보기
prevUntil() / nextUntil() - 지정 인수 사이의 형제요소 반환
<style>
.homzzang * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("h2").nextUntil('h4').css({"color": "red", "border": "2px solid red"}); //h2 ~ h4 사이의 형제요소
$("h2").prevUntil("h1").css({"color": "blue", "border": "2px solid blue"}); // h2 ~ h1 사이의 형제요소
});
</script>
<div class="homzzang">
<div>div (부모)
<h1>h1</h1>
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
<h4>h4</h4>
</div>
</div>
결과 보기