목차
- siblings() 예제 - 모든 형제요소의 스타일 변경.
- siblings() 정의
- siblings() 구문
- siblings() 예제 - 특정 형제요소의 스타일 변경.
- siblings() 예제 - 특정 형제요소 토글.
siblings() 예제 - 모든 형제요소의 스타일 변경.
<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.js").siblings().css({"color": "red", "border": "2px solid red"});
});
</script>
<div class="hz">
<ul>
<li>HTML</li>
<li>CSS</li>
<li class="js">JS</li>
<li>PHP</li>
<li>SQL</li>
</ul>
</div>
결과보기
siblings() 정의
지정 요소의 모든 형제 요소 (= 동일 부모 요소 갖는 요소) 반환.
1.
DOM 요소의 형제를 따라 앞뒤로 이동.
2.
prev() : 이전 형제요소
next() : 다음 형제요소
siblings() 구문
$(selector).siblings(filter)
[매개변수]
filter
선택. 형제 요소 검색 범위를 좁히기 위한 선택자 표현식 지정.
siblings() 예제 - 특정 형제요소의 스타일 변경.
<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.js").siblings(".server").css({"color": "red", "border": "2px solid red"});
});
</script>
<div class="hz">
<ul>
<li>HTML</li>
<li>CSS</li>
<li class="js">JS</li>
<li class="server">PHP</li>
<li class="server">SQL</li>
</ul>
</div>
결과보기
siblings() 예제 - 특정 형제요소 토글.
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$(".btn").on("click", function() {
$('.con').hide();
$(this).siblings(".con").toggle();
});
});
</script>
<style>
li {position:relative; border:1px solid silver; width:50px;}
.con {display:none; position:absolute; top:0; right: -50px;}
</style>
<!-- 리스트1 -->
<ul>
<li>
<a class="btn">버튼1</a>
<div class="con">내용1</div>
</li>
<li>
<a class="btn">버튼2</a>
<div class="con">내용2</div>
</li>
<li>
<a class="btn">버튼3</a>
<div class="con">내용3</div>
</li>
</ul>
결과보기