jQuery: filter out elements via class?

Question

I have a website featuring a long list of names. To make it more oversee-able, I'd like to put a text link in to

(on load) show all

(on clicking word "pears") hide all elements with class="apple"

(on clicking word "apples") hide all elements with class="pear"

(on clicking "show all") show all

I suppose it'd be like a really simplified version of "as you type" filtering.

Does a plug-in exist for this? I don't even know where to start!

Answer 1

hmm.. if you had a list like the following:

<span class="apple">red apple</span>
<span class="apple">green apple</span>
<span class="pear">big pear</span>
<span class="pear">little pear</span>

the following would show all:

$("span.*").show();

the following would hide all elements with 'class="apple"':

$("span[class='apple']").hide();

or you could go with hiding everything that doesn't have 'class="pear"':

$("span[class!='pear']").hide();

Answer 2

Just a quick glance over the jQuery's Selectors Help Page will answer all your questions.

Sorry for the RTFM post but the official manual really is the first place you should be looking.

Answer 3

This is exactly what you need.