Search within TutorialsPark

Jquery Filtering Methods


Learn to Narrow the selection using Methods to Filter Elements


Jquery Narrow the Selector

jQuery provides you multiple methods to remove elements from the selection, these methods return a new jQuery object comprising reduced element selection.

But the jQuery object on which the method was called remains unaffected.

Table : jQuery Narrowing Selection : Methods to filter Elements

Selector Description
eq(index) To remove all the elements except that one at the specified index.
filter(condition) To remove element that do not match the specified condition.
first() To remove all elements expect the first element
has(selector)
has(jQuery)
has(HTMLElement)
has(HTMLElement[])
To remove elements that do not have a descendant which matches the specified selector or jQuery object, or descendants of which do not include the specified HTMLElement object.
last() To remove all but the last element.
not(condition) To remove all elements that matches the condition.
slice(start, end) To remove all elements outside the specified range of index values.

Jquery Narrowing the Selection using eq(index) Method

The jQuery Method eq(index) is used to reduce the set of matched element to the one at the specified index only.

Example: jQuery Narrowing the Selection using eq(index) Method

Give it a TRY! » Note:The integer denotes a 0-based position of the element.


Reducing the Selection using slice() Method

The slice(start, end) method is used to reduce the selection to a range of elements, specified by a start and end index values.

In the demo below, the selection is reduced to elements beginning from the starting index of 0 and end index of 3

Example: Jquery Select Element using Extension Type Selectors

Give it a TRY! » Note:The jQuery script selects the first 3 elements.


Jquery Filtering Elements: using filter() Method

Table : jQuery filter Method Argument Types

Selector Description
filter(selector) To remove elements that do not match the selector.
filter(HTMLElement) To remove all but the specified element.
filter(jQuery) To remove elements that are not contained in the specified jQuery object.
filter(function(index)) The function is called for each element, functions which return false are removed.

The jQuery method filter() is used to specify a condition, elements that do not satify the condition are removed from the selection.

The demo below filters only :even elements and rest others are removed from the selection.

Example: Jquery Filtering Element using filter() Method

Give it a TRY! » Note:The selector :even and :odd use a 0-based indexing


Jquery Filter Method : Using a filter Function

The filter() method can also be used to filter elements against a function instead of a selector.

The demo below uses a filter function to select list items with two strong elements.

Example: Jquery Narrowing selection using HTMLElement

Give it a TRY! » Note: Only the result of this expression is India, because it has two strong elements.


Jquery Filtering Elements: using not() Method

Table : jQuery not Method Argument Types

Selector Description
not(selector) To remove elements that do not match the selector.
not(HTMLElement[])
not(HTMLElement)
To remove all but the specified element.
not(jQuery) To remove elements that are not contained in the specified jQuery object.
not(function(index)) The function is called for each element, functions which return false are removed.

The jQuery method not() is a complimentary to method filter(), the elements which do not match the condition of not() argument are included in the result.

The demo below uses the not() method to select the :first element in the list, all other elements expect the first have CSS styles applied to them.

Example: Jquery Filtering Element using not() Method

Give it a TRY! » Note:Other than the first element all other elements are selected


Jquery not() Method : Removing Specific Elements

You can also use the not() method to remove elements from the matched set, by using native JavaScript function getElementById.

Example: Removing specific elements using jQuery Method not()

Give it a TRY! » Note: Only the result of this expression is India, because it has two strong elements.


Jquery Filtering Elements: Reducing Selection based on Descendants

The jQuery method has() is used to reduce the selection to elements that have a particular descendants, by specifying either a selector or one or more HTMLElement objects.

Example: Jquery Filtering Element using has() Method

Give it a TRY! » Note:The script selects all list elements that has a descendant element of strong.


Filtering Elements : Jquery last() and first() Method

The jQuery method of first() and last() is used to select first and last element within the jQuery object.

Example: Reducing the Selection using first() and last() Element

Give it a TRY! » Note: The script selects the first and last elements within the jQuery Object.