jQuery ﬁlters enhance jQuery selectors
by providing additional logic. And this
actually unleashes the power of selectors.
• Lets start with some basic ﬁlters:
• :odd & :even ﬁlters - ﬁnds odd and even elements.
• Lets say a table with 4 rows(since everything is
zero-indexed in arrays rows are numbered as
0,1,2,3) :odd will give you rows 1 & 3 and even will
give you 0 & 2.
Here we have made background color
for all odd “li” inside “ul” with classname
“doclist” as lightgreen. Same goes
• :gt & :lt - They stand for greater than and
lesser than. :gt gives you children greater
than index and :lt gives you children lesser
• Lets say a table with 5 rows(0,1,2,3,4),
jQuery(“tr:gt(3)”) will give rows 3 & 4.
• To test this lets goto SlideShare’s invite
You can see that top 3 rows have lightgreen
• :ﬁrst & :last - These select just one
• In a table, :ﬁrst will return the ﬁrst row
and :last will return the last row.
You can see that ﬁrst row alone has “lightgreen”
:header - It gives you all header elements like h1,h2,h3...
Here you can see all header elements have lightgreen
:animate - gives you all the elements which are currently being
In order to do this ﬁrst we need to animate an element and
thats what the ﬁrst script does.You need not worry about what
that script is as of now. All it does is it animates the logo. Now
when you run jQuery(“:animated”) will give you the logo
element since it is being animated.
:eq - this matches a single element with its index.
Lets say a table with 4 rows(0,1,2,3), :eq(2) gives me row
with index “2”
• I hope you would have got a clear idea
about basic ﬁlters. Next week we will look
more “Content ﬁlters” and “Visibility
• Thank you.