JQuery 형제 - jQuery hyeongje

Question

13 Feb 2019 in jQuery

Siblings

jQuery에서 자주 사용하는 Siblings는 자신을 제외한 형제 요소들을 찾는 함수이다.
나의 경우, 형제 객체들에 class를 추가하거나 삭제할 때 많이 이용한다.
사용법은 아래와 같다.

객체.siblings( [selector] )

<ul>   
     <li>list item 1</li>   
     <li>list item 2</li>   
     <li class="third-item">list item 3</li>   
     <li>list item 4</li>   
     <li>list item 5</li>   
</ul>

이런 코드가 있을 때, 클래스가 ‘third-item’인 객체의 형제 요소를 찾으려고한다.
아래와 같이 작성한다면, list item1 부터 list item 5 까지 third-item을 제외하고 요소를 가져온다.

$("li.third-item").siblings()

활용법은 다음과 같다.
ex 1. ‘third-item’을 클릭했을 때, 다른 li들의 색상을 변경하는 법

$(".third-item").click(function() {  
  $(this).siblings().css("background-color", "red");  
});

ex 2. ‘third-item’의 형제요소들의 개수를 가져오는 법

$(".third-item").siblings().length

참고 사이트 : https://api.jquery.com/siblings/

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>

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