Filter results by Class Title using jQuery

Question

Hello folks,

I'm just starting to get a hang of this jQuery thing, so bear with me.

Essentially what I've got going on is a list of items with classes like "politicians" "entrepreuners" etc that define the people in this list.

The goal being, that I can attach tabs on the top of the list that will filter the results of the list.

I understand I can use .filter() to find the list items with the class "politician" attached to it. But how do I hide (or attach display:none;, either or) to the list items that don't have the class 'politician'?

As I said, I'm quite new to this, so if you can be specific, that'd be great!

Thanks again!

-Judson

EDIT: Here is the code as of now:

    $("#politician_filter").click(
    function(){
        $('#people li :not(.politician)').hide();
    })
})

Answer 1

Try something like this:

$("#politician_filter").click( function( event ){
    event.preventDefault();
    $('ul#people li:not(.politician)').hide();
})

Edit: removed space between li and :not.

Here's a working fiddle.

Answer 2

This hides all li elements and then shows all the lis with .politician class.

$("#politician_filter").click(function(){
    $("#people li").hide().filter(".politician").show();
    return false; //since you're using a link, disable default action
}​);​