jQuery .filter() Examples

Welcome To jQuery !!
+_+
Example 1
View
Find not a dogs !!

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


Find not a dogs !!<br><br>

<button type="button" onclick="j_test()">Click !!</button>

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

<script type="text/javascript">

    function j_test(){
        $('.css_test img')
        .filter(':not([src*=dog])')
        .fadeOut(1000, function(){
            $(this).fadeIn(1000);
        });
    }

</script>
jQuery
$( selector ).filter( selector )
Example 2
View
Find a Dogs & Cats

Source
<style type="text/css">
    .css_test {
        border:5px solid gray;
        border-radius:5px;
        padding:5px;
    }
    .css_test img {
        position:relative;
    }
</style>


Find a Dogs & Cats<br><br>

<button type="button" onclick="j_test()">Click !!</button>

<div class="css_test">
    <img src="http://superkts.com/img/css/bird20.gif" />
    <img src="http://superkts.com/img/css/dog061.gif" />
    <img src="http://superkts.com/img/css/cat051.gif" />
    <img src="http://superkts.com/img/css/huk.gif" />
    <img src="http://superkts.com/img/css/cat051.gif" />
    <img src="http://superkts.com/img/css/dog061.gif" />
    <img src="http://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(){ // Jump !
            $(this).animate({top:0}, 300);
        })
    }

</script>
jQuery .filter() Documentation : http://api.jquery.com/filter/