jQuery 공작소 : .filter()

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

filter 메서드는 셀렉터에 해당하는 요소를 필터링 합니다.
이 메서드의 역할은 "셀렉터 문법" 으로도 가능합니다.

예제 1
셀렉터에 해당하는 요소 필터링 하기
보기
개가 아닌것만 찾아봅시다.

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


개가 아닌것만 찾아봅시다.<br><br>

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

<div class="css_test">
    <img src="//superkts.com/img/css/dog061.gif" />
    <img src="//superkts.com/img/css/cat051.gif" />
    <img src="//superkts.com/img/css/dog061.gif" />
    <img src="//superkts.com/img/css/cat051.gif" />
    <img src="//superkts.com/img/css/dog061.gif" />
    <img src="//superkts.com/img/css/bird20.gif" />
    <img src="//superkts.com/img/css/huk.gif" />
</div>

<script type="text/javascript">

    function j_test(){
        $('.css_test img')
        .filter(':not([src*=dog])') // src 속성에 dog 가 없는것 찾기 (개가 아닌것 찾기)
        .fadeOut(1000, function(){
            $(this).fadeIn(1000);
        });
    }

</script>
관련 CSS
jQuery
$( '.css_test  img' ).filter( ':not([src*=dog])' )
- 클래스명이 css_test 요소의 이미지src 값에 dog없는것필터링하여 찾습니다.

$( '.css_test  img:not([src*=dog])' ) 과 동일합니다.
예제 처럼만 메서드를 써야한다면 위 셀렉터 방법이 더 좋을 수 있습니다.
예제 2
메서드를 적절히 활용한 예제 (셀렉터로 하기 어려운 경우)
보기
개와 고양이를 찾아봅시다.

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


개와 고양이를 찾아봅시다.<br><br>

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

<div class="css_test">
    <img src="//superkts.com/img/css/bird20.gif" />
    <img src="//superkts.com/img/css/dog061.gif" />
    <img src="//superkts.com/img/css/cat051.gif" />
    <img src="//superkts.com/img/css/huk.gif" />
    <img src="//superkts.com/img/css/cat051.gif" />
    <img src="//superkts.com/img/css/dog061.gif" />
    <img src="//superkts.com/img/css/huk.gif" />
</div>

<script type="text/javascript">

    function j_test(){
        $('.css_test img')
        .filter('[src*=dog]')
        .fadeOut(1000, function(){
            $(this).fadeIn(1000);
        })
        .end() // 셀렉터 초기화, 앞의 필터메서드 적용결과가 해제됩니다.
        .filter('[src*=cat]:not(:animated)') // 움직이지 않는 고양이만 찾기 (버튼 연타시 중복 애니메이션 방지)
        .animate({top:-50}, 200, function(){ // 점프효과
            $(this).animate({top:0}, 300);
        })
    }

</script>
관련 CSS
jQuery
- filter 메서드를 2개 사용하여 만들어본 예제입니다.
참고 메서드 : .end() .animate()
end 메서드에 대해 알아보세요 ^^
jQuery 홈페이지 .filter() API 문서 : http://api.jquery.com/filter/