Jquery[제이쿼리] siblings() 메서드 배우기

안녕하세요~ 제이쿼리공장장 주니주니 입니다.

오늘은 제이쿼리[jquery] siblings() 메서드를 배워보겠습니다.

이렇게 준비해보았습니다.

준비한 소스의 실행화면입니다.

=============================== 
$('.b1').on('click',function(){
   $('.div0_1').siblings().not("input").css("border-color","skyblue");
   setTimeout(function(){
    $('.div0_1').siblings().not("input").css("border-color","black");
   }, 1000);
  });
=============================== 
class b1가 click되면 <== siblings() class=div0_1 버튼입니다.
class div0_1대상으로 siblings()메서드와 not()메서드를 사용하여 해당되는 대상의
css를 변경하고 setTimeout()메서드를 사용하여 다시 해당되는
대상의 css를 변경하도록하는 소스입니다.

※siblings()란 선택한 대상의 모든형제를 찾는 메서드입니다.
형식은 siblings( [selector ] ) 으로 구성되어있습니다.
selector 선택된 자식들중에서 또다시 세부적으로 선택할 자식을 적어주시면된답니다.
예)siblings("h2")

이해가 안되는 분들은 ↓↓↓↓↓↓
http://api.jquery.com/siblings/

siblings() class=div0_1 버튼을 누른뒤의 모습입니다.
class div0_1의 형제들중 <input>태그를 뺀 형제들의 css가 변경된 모습입니다.

=============================== 
$('.b2').on('click',function(){
   $('.div0_2_2').siblings().css("border","5px solid skyblue");
   setTimeout(function(){
    $('.div0_2_2').siblings().css("border","2px solid black");
   }, 1000);
  });
=============================== 
위에 소스부분이랑 다른부분이 많이없어서 설명을 생략하겠습니다.

siblings() class=div0_2_2 버튼을 누른뒤의 모습입니다.
class div0_2_2의 형제들의 css가 변경된 모습입니다.

오늘은 제이쿼리[jquery] siblings() 메서드를 배워보았습니다.
그럼 다음에 또만나요~