목차
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>
결과 보기
