.find()

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

find 메서드는 셀렉터에 해당하는 요소를 대상으로 추가적으로 셀렉터를 입력하여 찾기를 합니다.
이해하기 쉬운 메서드 입니다. *^^*

+_+
예제 1
보기
클릭한 동물을 점프시켜 봅시다!

소스
<style type="text/css">
    .css_test {
        border : 5px solid gray;
        border-radius : 5px;
        padding : 5px;
        position : relative;
    }
    .css_test img {
        position : relative; /* 애니메이션 효과 적용을 위해 적용 */
    }
</style>

클릭한 동물을 점프시켜 봅시다!<br><br>

<button type="button" onclick="j_test('닭')">닭</button>
<button type="button" onclick="j_test('고양이')">고양이</button>
<button type="button" onclick="j_test('개')">개</button>
<button type="button" onclick="j_test('새')">새</button>

<div class="css_test">
    <img name="닭" src="http://superkts.com/img/css/bird17.gif">
    <img name="고양이" src="http://superkts.com/img/css/cat051.gif">
    <img name="개" src="http://superkts.com/img/css/dog061.gif">
    <img name="닭" src="http://superkts.com/img/css/bird17.gif">
    <img name="새" src="http://superkts.com/img/css/bird30.gif">
    <img name="개" src="http://superkts.com/img/css/dog060.gif">
    <img name="고양이" src="http://superkts.com/img/css/cat051.gif">
    <img name="개" src="http://superkts.com/img/css/dog061.gif">
    <img name="고양이" src="http://superkts.com/img/css/cat051.gif">
</div>

<script type="text/javascript">

    function j_test(v){
        // 보기 편하게 여러줄로 코딩
        $( '.css_test' )
        .find( '[name=' + v + ']:not(:animated)' ) // 이름으로 동물을 찾고 애니메이션 되지 않는것만 찾기
        .animate({top:-100}, 200, function(){ // 점프 상승
            $(this).animate({top:0}, 200, function(){ // 점프 하강
                $('.css_test').animate({top:'+=2'}, 10, function(){ // 테두리 하강 (점프하강한 동물의 무게로 인해 ..)
                    $('.css_test').animate({top:'-=2'}, 10) // 테두리 상습 (원복)
                })
            });
        })
    }

</script>
관련 CSS
jQuery

$( '.css_test' ).find( 셀렉터 )  -  클래스명이 css_test 인 요소를 대상으로 셀렉터로 지정한 것을 찾습니다.

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