jQuery Tutorial
jQuery Introduction jQuery Getting Started jQuery Syntax jQuery Selectors jQuery Events
jQuery Effects
jQuery Hide/Show jQuery Fade jQuery Slide jQuery Animation jQuery stop() jQuery Callback jQuery Chaining
jQuery Manipulation
jQuery Get/Set jQuery Add jQuery Remove jQuery CSS Classes jQuery css() jQuery Dimensions
jQuery Traversing
jQuery Traversing jQuery Ancestors jQuery Descendants jQuery Siblings jQuery Filtering
jQuery AJAX
jQuery AJAX Intro jQuery Load jQuery Get/Post jQuery AJAX Events
jQuery Misc
jQuery noConflict() jQuery Filters
jQuery References
jQuery Reference jQuery Selectors jQuery Events jQuery Effects jQuery HTML/CSS jQuery Traversing jQuery AJAX jQuery Miscellaneous jQuery Properties

jQuery Traversing Filtering

With jQuery we can easily filter out various elements from a list of DOM elements.

In this chapter we will explain how to narrow down the search for elements in a DOM tree.


Filtering the DOM Tree

We have the following jQuery methods that are used for select a specific element based on its position in a group of elements:

The following section will show you how to use each method.


jQuery first() Method

The jQuery first() method returns the first element of the selected elements.

The following example highlights the first paragraph:

Run code

jQuery last() Method

The jQuery last() method returns the last element of the selected elements.

The following example highlights the last paragraph:

Run code

jQuery eq() Method

The jQuery eq() method returns an element with a specific index number of the selected elements.

The index number always starts at 0, so the first number will have index 0 (not 1).

The following example selects the third paragraph (index number 2):

Run code

jQuery filter() Method

The jQuery filter() method returns elements that match a certain criteria.

This method filter out all the elements that do not match the selected criteria and those matches will be returned.

The following example returns all paragraphs with class name "demo":

Run code

The following example returns all list items that are even:

Run code

jQuery not() Method

The jQuery not() method returns elements that do not match a certain criteria.

This method is the opposite of the filter() method.

The following example returns all paragraphs that do not have the class name "demo":

Run code

jQuery has() Method

The jQuery has() method returns all elements that match the specified selector having one or more elements inside them.

The following example returns all paragraphs that have a <span> element inside of them:

Run code

jQuery is() Method

The jQuery is() method checks if one of the selected elements matches the given argument.

This method will return true if at least one of these elements matches the given arguments, and false if not.

The following example checks if the parent of <p> is a <div> element:

Run code

jQuery Traversing Reference

For a complete Traversing methods reference, visit our jQuery Traversing Reference.