➥ jQuery Tutorial
➥ jQuery Effects
- jQuery Effects
- jQuery Effects - Fading
- jQuery Effects - Sliding
- jQuery Effects - Animation
- jQuery Stop Animations
- jQuery Callback Functions
- jQuery - Chaining
➥ jQuery HTML
- jQuery - Get
- jQuery - Set
- jQuery - Add Elements
- jQuery - Remove Elements
- jQuery - CSS Classes
- jQuery - css() Method
- jQuery - Dimensions
➥ jQuery Traversing
- jQuery Traversing - Ancestors
- jQuery Traversing - Descendants
- jQuery Traversing - Siblings
- jQuery Traversing - Filtering
➥ jQuery AJAX
➥ jQuery Misc
Tutorial
Filtering with jQuery Traversing
The methods first(), last(), eq(), filter(), and not()
The most basic filtering methods are first(), last(), and eq(), which can choose a single component predicated on its role in a collection of entities.
Both these techniques, such as filter() and not(), let you select elements that meet or just don't encounter a list of conditions.
first() method in jQuery
The first() function compares the whole first element from the list of elements stipulated.
The first <div> element is chosen in the given description:
Illustration:
EXAMPLE ❯
last() method of jQuery
The last() function takes the stipulated components' last element.
The last <div> element is chosen in the given description:
Illustration:
EXAMPLE ❯
jQuery's eq() function
The eq() function compares a component containing the chosen elements' index number.
Because the index numbers begin at 0, the whole first component will also have the index 0 rather than 1. The illustration below chooses the 2nd <p> element (index number one):
Illustration:
EXAMPLE ❯
filter() method in jQuery
You can use the filter() method to specify a set of criteria. Elements that do not fulfill specific threshold are deleted from the collection, while those that do are retained.
The example below reverts all <p> components with the category "intro":
Illustration:
EXAMPLE ❯
not() method in jQuery
All elements that would not meet the criteria are handed back by the not() method.
Not() is the inverse of filter ().
The illustration below returns all <p> components which do not have the category name "intro":
Illustration: