Basic Filter for Index

Basic filter is used to implement some properties like filter element according to their index in set, elements which are in the progress of animation at the time selector is run etc.

Some of the key filters and their syntax are given with example :

: animated Selector

This selector select the element which are in advancement of an animation at the time selector is running.

Example :

$("#butt").click(function(){
	$("div:animated").toggleClass("colored");
});

Here "butt" is a button , when you click on it, it will change the color of all the animated div element.

$("div:animated") selects all the div element which are in progress of animation.

toggleClass("colored") change the CSS class to 'colored'.

: eq Selector

It filter the element which are at index at ' n ' within the matched set.
Note that java script array is using 0 based indexing.

Example :

<script>$("td:eq(2)").css("color", "red");</script>

Following code change the color of third ' td ' of each row and change it's color to 'red'.

: even Selector

It selects the even elements within the matched set.

<script>$("tr:even").css("background-color", "#bbbbff");</script>

It selects the even rows within the matched set. It do not select the even number index rows . It selects 2nd element ,4th element & so on.

: first Selector

This Selector selects the first filtered element.

Example :

<script>$("tr:first").css("font-style", "italic");</script>

: gt Selector

This selector selects all the element which has greater index than the element with provided index.

Example :

<script>$("td:gt(4)").css("text-decoration", "line-through");</script>

Here 4th element has index value 3 and it filters those elements with greater index value.

: header Selector

This selector filters the elements which have headers like H!,H2,H3 etc.

Example :

<script>$(":header").css({ background:'#CCC', color:'blue' });</script>

This selector selects all the header.

: last Selector

This selector filters the last matched element.

Example :

<script>$("tr:last").css({backgroundColor: 'yellow', fontWeight: 'bolder'});</script>

The above code filters the last tr or row in table and will change it's background color.

: lt Selector

This selector selects all the element which has lesser index than the element with provided index.

: not Selector

This selector is slightly different filtering style. As it filters those who don't matches provided criteria.

: odd Selector

This selector selects the odd elements like in a table it selects 1st , 3rd rows etc not according to the index number. Since it selects 3rd row means it has index value 4.

Example :

<script>$("tr:odd").css("background-color", "#bbbbff");</script>