.children()

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

children 메서드는 지정한 셀렉터내의 자식요소를 찾습니다.

+_+
예제 1
부모개를 클릭하면 children 요소인 강아지가 반응합니다.
보기
큰개(부모개)를 클릭해 보세요.

소스
<style type="text/css">
    .css_test span {
        background-image : url('http://superkts.com/img/css/dog061.gif');
        background-repeat : no-repeat;
        display : inline-block;
    }
    .css_test .dog {
        background-position : top;
        background-size : 100px;
        height : 170px;
        margin : 0 20px;
        width : 220px;
    }
    .css_test .dog2 {
        background-size : 50px;
        height : 50px;
        margin-top : 120px;
        position : relative;
        width : 50px;
    }
    .css_test .dog2.Xdog {
        background-image : url('http://superkts.com/img/css/dog060.gif');
    }
</style>

큰개(부모개)를 클릭해 보세요.<br><br>

<div class="css_test">
    <span class="dog" onclick="j_test(this)">
        <span class="dog2"></span>
        <span class="dog2"></span>
        <span class="dog2"></span>
        <span class="dog2"></span>
    </span>
    <span class="dog" onclick="j_test(this)">
        <span class="dog2"></span>
        <span class="dog2"></span>
        <span class="dog2"></span>
        <span class="dog2 Xdog"></span>
    </span>
</div>

<script type="text/javascript">
    function j_test(o){
        $(o).children().finish().animate( {top:'-=20'}, 100, function(){
            $(this).animate( {top:'+=20'}, 300);
        });
    }
</script>
관련 CSS
jQuery

$( 셀렉터 ).children()  -  해당 셀렉터자식 요소를 반환합니다.

- 예제에서는 span 안에 들어있는 span 들을 대상으로 했습니다.
- 어미개 아래에 있는 강아지들이죠.

예제 2
셀렉터를 지정하여 필터링하여 찾기
보기
큰개(부모개)를 클릭해 보세요.

소스
<style type="text/css">
    .css_test span {
        background-image : url('http://superkts.com/img/css/dog061.gif');
        background-repeat : no-repeat;
        display : inline-block;
    }
    .css_test .dog {
        background-position : top;
        background-size : 100px;
        height : 170px;
        margin : 0 20px;
        width : 400px;
    }
    .css_test .dog2 {
        background-size : 50px;
        height : 50px;
        margin-top : 120px;
        position : relative;
        width : 50px;
    }
    .css_test .dog2.Xdog {
        background-image : url('http://superkts.com/img/css/dog060.gif');
    }
</style>

큰개(부모개)를 클릭해 보세요.<br><br>

<div class="css_test">
    <span class="dog" onclick="j_test(this)">
        <span class="dog2"></span>
        <span class="dog2"></span>
        <span class="dog2"></span>
        <span class="dog2"></span>
        <span class="dog2 Xdog"></span>
        <span class="dog2"></span>
        <span class="dog2"></span>
    </span>
</div>

<script type="text/javascript">
    function j_test(o){
        // :not(.Xdog) 셀렉터를 사용해서 스파이를 걸러낸다
        $(o).children( ':not(.Xdog)' ).finish().animate({ top : '-=30' }, 100, function(){
            $( this ).animate({ top : '+=30' }, 300);
        });
    }
</script>
관련 CSS
jQuery

$( 셀렉터 ).children( ':not(.Xdog)' )  -  해당 셀렉터자식 요소를 반환합니다. (클래스명이 Xdog 인것은 제외)

- 자식요소를 필터링 하여 찾는 예제입니다.
- 스파이가 하나 숨어있네요.

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