How to use Jquery Basic filters

JQuery filters provide a great control for selecting the elements in DOM as we discussed in earlier post.
For get a better understand about filters read more about JQuery flters from this link.

In this post lets see how to select elements using JQuery filters and applying simple CSS on them

Same HTML file used in previous tutorial for JQuery selectors will be used in this tutorial as well.

Lets get in to work.

here are the JQuery code snippets for filtering DOM elements

1. Get the first element from a returned set
   $("p:first").css("border","3px solid red");
   This will get the first paragraph element and put a red border around it


2. Get the last element from a returned set
   $("p:last").css("border","3px solid red");
   This will get the last paragraph element and put a red border around it


3. Get the odd elements from a returned set
   $("p:odd").css("border","3px solid red");
   This will get the odd paragraph elements and put red borders around them


4. Get the even elements from a returned set
   $("p:even").css("border","3px solid red");
   This will get the even paragraph elements and put red borders around them


5. Get the elements past an index from a returned set
   $("p:gt(1)").css("border","3px solid red");
   This will get the paragraph elements indexed as greater than 1 and put red borders around them


6. Get the element equal to an index from a returned set
   $("p:eq(1)").css("border","3px solid red");
   This will get the paragraph element indexed as equal to 1 and put red borders around it


7. Get the element not equal to an index from a returned set
   $("p:not(p:eq(1))").css("border","3px solid red");
   This will get all the paragraph elements not indexed as 1 and put red borders around them

Try these simple JQuery selectors and make easy manipulating your DOM.

Please add a comment if you have some thing to add or you are not clear with something.