Question

I found this link where I got this code:

$(document).ready(function(){     
    //when a link in the filters div is clicked...  
    $('#filters a').click(function(e){        
        //prevent the default behaviour of the link  
        e.preventDefault();       
        //get the id of the clicked link(which is equal to classes of our content  
        var filter = $(this).attr('id');      
        //show all the list items(this is needed to get the hidden ones shown)  
        $('#content ul li').show();       
        /*using the :not attribute and the filter class in it we are selecting 
        only the list items that don't have that class and hide them '*/  
        $('#content ul li:not(.' + filter + ')').hide();      
    });       
}); 

It worked fine, but I’m using this code in a select button. When I choose the option, it filters ok.
But I have more than one select – 5 in fact -, but I don’t know how to approach in this situacion.

Example:
Items: strawberry, apple, cherry, orange, banana, grape
Select 1 – all fruits, red color, green color, etc
Select 2 – all forms, rounded form, triangle form.
Select 3 – all another thing, another thing

The user can first choose the color red – First Filter.
then he could choose rounded, so apple and cherry would be the answers.

I’ve already tried to filter only the visible images, but some error ocurred when I try do bring the information back.

In the same example with the results apple and cherry, if the users select all fruits the results must be apple, cherry, orange and grape.

Some advice?

Here is an example code
Note that the filters are working in isolated way.

Answer 1

Fiddled:

http://jsfiddle.net/iambriansreed/turMe/

jQuery:

$(document).ready(function(){  

    var filters = {};

    //when a link in the filters div is clicked...  
    $('#filters a').click(function(e){        
        e.preventDefault();      
        filters[$(this).parent().attr('class')] = $(this).attr('id');      
        var show = $('#content ul li').filter(function(){                
            for(k in filters)
                if(
                   filters.hasOwnProperty(k) &&
                   !$(this).hasClass(filters[k])
                )
                return false;            
            return true;                
        });
        show.show();            
        $('#content ul li').not(show).hide();            
        $('pre').html(JSON.stringify(filters));            
    });      
}); ​

HTML

<!-- the filters div -->  
<div id='filters'>
<p>Filter One:</p>
<p class="f1" >
    <a href='#' id='allitens'>All</a>
    <a href='#' id='bestof'>Best Of</a>
    <a href='#' id='jquery'>jQuery</a>
    <a href='#' id='php'>PHP</a>
    <a href='#' id='html'>HTML</a>
    <a href='#' id='css'>CSS</a> 
</p>
<p>Filter Two: Begins with letter or Number</p>
    <p class="f2">
<a href='#' id='b1'>B</a> 
<a href='#' id='n1'>1</a>
<a href='#' id='H'>H</a>
    </p>
</div>  


    <!-- the content div -->  
    <div id='content'>  
        <!-- the unordered list where we store the content in list items -->  
        <ul>  
          ...
        </ul>  
</div>  
Filters
<pre></pre>

I create an object which I then assign all the filters to. I then filter out the DOM elements that don’t meet the criteria. This will now work for any number of filters.

On this line:

filters[$(this).parent().attr('class')] = $(this).attr('id');

I am doing three things:

1. Getting the class attribute of the clicked link’s parent (the paragraph tag). $(this).parent().attr('class')
2. Getting the ID of the clicked link.
   $(this).attr('id')
3. Adding or overwriting a property of the object filters using the key defined in 1 and the value defined in 2.