jQuery 공작소 : .siblings()

jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!

siblings 메서드는 요소의 형제(동급) 요소들을 찾습니다.
예제를 보시면 금방 이해 할 수 있습니다. "시블링" 으로 발음합니다. ^^;

예제 1

형제요소를 찾는 예제1

보기

버튼을 눌러보세요. 가운데가 큰형이며 형제 요소를 찾습니다.

소스

<style type="text/css">
    .css_test {
        border : 5px solid gray;
        border-radius : 5px;
        padding : 5px;
    }
    .css_test .bro {
        width : 70px;
    }
</style>

버튼을 눌러보세요. 가운데가 큰형이며 형제 요소를 찾습니다.<br><br>

<button type="button" onclick="j_test()">눌러보세용</button>

<div class="css_test">
    <img src="//superkts.com/img/huk1.gif">
    <img src="//superkts.com/img/huk1.gif">
    <img class="bro" src="//superkts.com/img/huk1.gif">
    <img src="//superkts.com/img/huk1.gif">
    <img src="//superkts.com/img/huk1.gif">
</div>

<script type="text/javascript">

    function j_test(){
        $('.css_test .bro').siblings().attr('src', '//superkts.com/img/huk2.gif'); // 표정바꾸기

        setTimeout(function(){
            $( '.css_test img' ).attr('src', '//superkts.com/img/huk1.gif'); // 표정되돌리기
        }, 1000);
    }

</script>

관련 CSS

borderborder-radiuspaddingwidth

jQuery

$( 셀렉터 ).siblings() - 셀렉터와 이웃한 형제요소를 찾습니다.

- 형제요소는 부모나 자식이 아닌 동등한 관계의 이웃한 요소를 의미합니다.
- 설명이 복잡한가요? 다음 예제를 봅시다 ^^

예제 2

형제요소를 찾는 예제2

보기

얼굴을 눌러보세요. 네모안의 얼굴들만 반응합니다.

소스

<style type="text/css">
    .css_test, .css_test div {
        border : 5px solid gray;
        border-radius : 5px;
        padding : 5px;
    }
     .css_test div {
         margin : 10px 0;
         padding : 10px;
         background : #efefef;
    }
    .css_test img {
        width : 60px;
        cursor : pointer;
    }
</style>

얼굴을 눌러보세요. 네모안의 얼굴들만 반응합니다.<br><br>

<div class="css_test">
    <div class="group1" style="border-color:#FF0080;">
        <img src="//superkts.com/img/huk1.gif">
        <img src="//superkts.com/img/huk1.gif">
        <img src="//superkts.com/img/huk1.gif">
        <img src="//superkts.com/img/huk1.gif">
        <img src="//superkts.com/img/huk1.gif">
    </div>
    <div class="group2" style="border-color:#8000FF;">
        <img src="//superkts.com/img/huk1.gif">
        <img src="//superkts.com/img/huk1.gif">
        <img src="//superkts.com/img/huk1.gif">
        <img src="//superkts.com/img/huk1.gif">
        <img src="//superkts.com/img/huk1.gif">
    </div>
    <div class="group3" style="border-color:#0080C0;">
        <img src="//superkts.com/img/huk1.gif">
        <img src="//superkts.com/img/huk1.gif">
        <img src="//superkts.com/img/huk1.gif">
        <img src="//superkts.com/img/huk1.gif">
        <img src="//superkts.com/img/huk1.gif">
    </div>
</div>

<script type="text/javascript">

    // 이미지에 클릭이벤트 생성
    $('.css_test img').bind( 'click', function(){
        j_test( this );
    });

    function j_test(o){
        $(o).siblings().attr('src', '//superkts.com/img/huk2.gif'); // 표정바꾸기

        setTimeout(function(){
            $(o).siblings().attr('src', '//superkts.com/img/huk1.gif'); // 표정바꾸기
        }, 200);
    }

</script>

관련 CSS

backgroundborderborder-radiuscursormarginpaddingwidth

jQuery

- 형제요소만 대상으로 하는것을 좀 더 확인해 보는 예제입니다.
- 클릭한 얼굴이 속해있는 네모칸 안의 얼굴들만 반응합니다. (동등한 관계의 대상)

예제 3

자신 포함 형제찾기

보기

클릭한 얼굴도 포함합니다.

소스

<style type="text/css">
    .css_test, .css_test div {
        border : 5px solid gray;
        border-radius : 5px;
    }
     .css_test div {
         margin : 10px;
         padding : 10px;
         background : #efefef;
    }
    .css_test img {
        width : 60px;
        cursor : pointer;
    }
</style>

클릭한 얼굴도 포함합니다.<br><br>

<div class="css_test">
    <div class="group1" style="border-color:#FF0080;">
        <img src="//superkts.com/img/huk1.gif">
        <img src="//superkts.com/img/huk1.gif">
        <img src="//superkts.com/img/huk1.gif">
        <img src="//superkts.com/img/huk1.gif">
        <img src="//superkts.com/img/huk1.gif">
    </div>
    <div class="group2" style="border-color:#8000FF;">
        <img src="//superkts.com/img/huk1.gif">
        <img src="//superkts.com/img/huk1.gif">
        <img src="//superkts.com/img/huk1.gif">
        <img src="//superkts.com/img/huk1.gif">
        <img src="//superkts.com/img/huk1.gif">
    </div>
    <div class="group3" style="border-color:#0080C0;">
        <img src="//superkts.com/img/huk1.gif">
        <img src="//superkts.com/img/huk1.gif">
        <img src="//superkts.com/img/huk1.gif">
        <img src="//superkts.com/img/huk1.gif">
        <img src="//superkts.com/img/huk1.gif">
    </div>
</div>

<script type="text/javascript">

    // 이미지에 클릭이벤트 생성
    $('.css_test img').bind( 'click', function(){
        j_test( this );
    });

    function j_test(o){
        var j = $(o).siblings().add(o); // 변수화하기

        j.attr('src', '//superkts.com/img/huk2.gif'); // 표정바꾸기

        setTimeout(function(){
            j.attr('src', '//superkts.com/img/huk1.gif'); // 표정바꾸기
        }, 200);
    }

</script>

관련 CSS

backgroundborderborder-radiuscursormarginpaddingwidth

jQuery

- add 메서드를 사용하여 클릭한 얼굴도 포함하였습니다.

참고 메서드 : .add()

jQuery 홈페이지 .siblings() API 문서 : http://api.jquery.com/siblings/

☞ 목록으로 가기