Basic filters

As you work with WordPress, I believe you'll find the :not () filter and the :header filters incredibly useful. The :header filter allows you to simply select all the headers in a selection, no matter what level header they are. Rather than having to select h1 and h2 and so on, adding the :header filter to your selection will grab up all the headers, h1 through h6 into the wrapper. Try it out, in your custom-jquery.js file, and add the following code (don't worry about the ,css(...); part of the code; we'll get to that later. I'm just using it to help us to visualize what jQuery can do):

jQuery(function(){

jQuery(":header").css("background", "#f60"); });

You'll see in the next screenshot that all headers are selected, h1, h2, and so on:

WordPress and jQuery justanoth*-WordPro

WordPress and jQuery justanoth*-WordPro

Ut enim ad minim veniam

Posted on January 27, 2010 by admin

Ut enim ad minim veniam

Posted on January 27, 2010 by admin

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

tewftt Comments

tewftt Comments

■ Uncategorized

■ Uncategorized

My favorite filter is the : not filter. Ever noticed on an airplane, you're often reminded that the "nearest exit may be located behind you"? The same principle holds true when you're trying to scoop up the right elements into your jQuery wrapper. Sometimes it's easier to tell jQuery what you don' t want in the wrapper! I once worked with a theme that had some very pretty e-mail and PDF icon elements tucked inside the . post class. The theme did not have an . entry class. This was irritating as I wanted to apply a general transformation to images that were loaded into the WordPress posts, but these icons were affected! The theme author had them wrapped in a class named .postIcons. Using the : not () filter, I was able to transform all img tags that were in the . post class but not in the . postIcons class. Sweet.

Take a look at what happens when you add the :not filter with our previous :header selection:

jQuery(":header:not(li :header)").css("background", "#f60");

The following filters now show us all headers selected, except for headers in list items:

You've probably noticed just from the previous example that you can get pretty clever with filters, using them multiple times within a selection.

What's that, you say? Yes, you're correct: (":headers:not(li h2)") achieves the exact same results as the previous example, and yes, it's always better to take the most direct route to your selections. I'm just trying to illustrate how these two filters can be used. Eventually, you will run into more complex situations where they'll come in very handy. For everything else, use plain selectors first, before resorting to filters.

Let's take a look at each Basic filter, what it's syntax looks like, and what it does in detail. Because most WordPress theme authors use the .post class, and most of the time you'll be targeting post elements to make the syntax have the most sense. I'll use .post class name often in my examples, but remember, your main selector can be any tag, id name, or class name used in CSS selector syntax!

Example

Syntax

Description

:not(selector)

jQuery("

post

img:

Filters out all elements matching the given

not(.pIcon)").

jqFn();

selector.

:header

jQuery("

.post:

Filters down to all elements that are headers,

header") .

jqFn(

);

such as h1, h2, h3, and so on.

fiirst

jQuery("

post:

: first")

Filters down to the first selected element only.

• jqFn();

:last

jQuery("

post:

last")

Filters down to the last selected element only.

•jqFn();

:even

jQuery(" •jqFn();

post:

even")

Filters down to even elements only. Note: Arrays are zero-indexed! Zero is considered an even number so your first item will be selected!

:odd

jQuery(" •jqFn();

post:

odd")

Filters down to odd elements only. Note: Arrays are zero-indexed! Zero is considered an even number so your second item will be selected!

:eq(number)

jQuery(" •jqFn();

post:

:eq(0)")

Filters down to a single element by its index, which again is zero-indexed.

:gt(number)

jQuery(" •jqFn();

post:

:gt(0)")

Filters down to all elements with an index above the given one, again this is zero-indexed.

:lt(number)

jQuery(" •jqFn();

post:

: lt(2) ")

Filters all elements with an index below the given one.

:animated

jQuery("

post:

Filters down to all elements that are currently

animated"

).jqFn();

being animated (we'll get to animation later in

this chapter).

Blogging For Business

Blogging For Business

Download this Guide And Discover How Start And Run Your Very Own Successful Business Blog. Always Wanted To Start Your Own Blog?

Get My Free Ebook


Post a comment