.siblings() 메서드

.siblings()

주로 목록에서 마우스로 클릭한 요소만 강조/액션등 이벤트를 부여할 때 쉽게 프로그래밍을 가능하도록 해주는 메서드이다.
.siblings() 메서드를 통해 목록에서 사용자가 선택(클릭)한 부분을 어떻게 처리하는지 알아보자.
(참고로 siblings의 영어단어 뜻은 '형제의, 자매의' 라는 뜻이다.)

예제1

Value 1

Value 2

Value 3

Value 4

Value 5

▲ 클릭해 보세요

위에 td를 클릭했을 때, 클릭한 요소는 하늘색을, 선택되지 않은 td는 회색으로 표시해 보도록 하였다.
기존에는 모든 색상을 회색으로 세팅 후 선택된 td를 하늘색으로 다시 바꿔주는 방법, 또는 .each() 메서드와 분기문을 통해 나누어야 하는 수고로움이 필요 할 것이다.
허나 .siblings()함수를 사용하게 된다면 간단한 방법으로 표현할 수가 있다.

소스코드

<script type"text/javascript">
   $("td").each(function(){
      $(this).click(function(){
         $(this).css("background-color","skyblue");
         $(this).siblings().css("backgorund-color", "#dedede"); //자신을 제외한 같은 '배열'에 있는 다른 요소(형제)들에 대해서 다른 css를 적용시켜준다.
      });
   });
</script>

.each() 메서드를 통해 "td"의 click 이벤트를 할당하고, 이벤트 발생시 이벤트가 발생된 요소에는 배경색(하늘색) 을 추가시키며, 자신을 제외한 나머지 요소에 대해서는 배경색(회색) 을 추가시켜준다.

결국 .siblings() 메서드는 선택된 요소의 모든 형제 요소를 반환합니다.
같은 위치 요소는 동일한 부모를 공유하며 이 방법으로 DOM 요소의 형제, 자매를 제어할 수 있는 것입니다.