jQuery Filters

Last Updated Jul 21, 2015, 12:00:06 PM





jQuery filter() Method

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

Syntax

Consider a web page with with 5 div elements, each one has class whose name is middle. The jquery filter() method gets all elements which matches the class name value as middle. Finally, you can manipulate the elements with css styles.

Example

Look at the above HTML code, some div elements contain it's class name as "middle". Using the below jquery filter() method we can simply filter those div elements and apply the styles accordingly.


Output jquery filter() method
Try It Now

jQuery first() Method

jQuery first() method selects the firstHTML element in a group of DOM elements. It doesn't take any parameters.

Syntax

In the following example, it will select and highlight the first tr element

Example HTML
jQuery
Output
jquery first() method
Try It Now

jQuery has() Method

jQuery has() method used to select allHTML elements from a subset of matching elements which matches the given specific condition or selector.

Note: To select an element which has multiple elements inside of it, use a comma( , ) .

Syntax

Let us see an example of jQuery has() method

Example HTML

The above jquery has() method will select all the div elements if it also contains a paragraph in it.

Output
jquery has() method
Try It Now

jQuery is() Method

jQuery is()method checks if one of the selected HTMLelement matches the selector element.

Note: Like other methods .is() method doesn’t create any object.


Let us see the following example which illustrates the usage of jQuery is() method.

Example HTML
jQuery

The above jquery is() method example will give an alert if the parent element of the paragraph tag is a div element


Try It Now

jQuery :last Selector

jQuery :last selectorselects the last matched element in the given list of HTML elements.

Note: :last selector, selects a single element by filtering the current jQuery collection and matching the last element within it.

Syntax
Example HTML
jQuery

In the above jQuery :last selector example, we have 3 tr elements. Using the above jquery :last selector we can target the last tr element and apply the green color to the text


Output
jquery :last selector
Try It Now

jQuery slice() Method

jQuery slice() method selects a subset of elements based on its index. A subset is a set that is a part of a larger set. .

The jQuery slice method has some limitations. There is a limit to the selection of elements in a group by keeping a start and end points. The start parameter starts with an index 0. The start parameter indicates the starting subset and the stop parameter is optional.

Syntax

Look at the below jquery slice() method example code as shown below.

Example

Try It Now

jQuery Traversal Referances

jQuery Traversal Reference

jQuery Traversal Method

jQuery Basic Traversing

Sources and Credits

The content and methods in the tutorial has been referred and updated with jQuery API and The jQuery Foundation

Last Updated Jul 21, 2015, 12:00:06 PM