Child filters

Anything in the jQuery wrapper is an array, and these child filters will come in handy, but you'll probably find these filters come in most handy when working with li tags or definition list elements in WordPress. By default, WordPress splits a fair amount of its link content into li tag elements and galleries that are are created by wrapping the images and descriptions in definition lists (dt dd elements).

Example

Syntax

Description

:nth- jQuery(".linkcat li:nth-

child(number/ child(1) ").css("background", even/odd) "#f60");

first-child jQuery(".linkcat li: first-

child").css("background", "#f60");

:last-child jQuery(".linkcat li: last-

child").css("background", "#f60");

:only-child jQuery(".pagenav li: only-

child").css("background", "#f60");

Filters down to the elements that are the "nth" child of its selector. Note that this is not zero-indexed! 1 and odd selects the first element.

Filters down to the elements that are the first child of their parent.

Filters down to the elements that are the last child of their parent.

Filters down to the elements that are only-children of their parent. If a parent has more than one child, no elements are selected.

Here you can see the :only-child filter in action:

jQuery("li:only-child").css("background", "#f60")

Here's the :nth-child filter at work in the Meta list:

jQuery(".widget_meta li:nth-child(odd)").css("background", "#f60")

jQuery(".widget_meta li:nth-child(odd)").css("background", "#f60")

Was this article helpful?

0 0
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