Hello guys! Welcome to this tutorial on jQuery. In this tutorial post, i will be explaining some of the useful jQuery DOM filter methods which can be used to filter out various elements from a list of DOM elements.
eq( index ) Method
eq( index ) method reduces the set of matched elements to a single element.
Syntax
Below is the syntax to use this method -
selector.eq( index )
Parameter Details
Here is the description of all the parameters used by this methods -
- index - This is the position of the element in the set of matched elements, starting at 0 and going to length -1.
Example
The following example below shows a simple usage of this method, which adds a green color to second list item -
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "li" ).eq( 2 ).addClass( selected );
} );
</script>
<style>
.selected { color: green; }
</style>
</head>
<body>
<div>
<ul>
<li>list 1</li>
<li>list 2</li>
<li class = "selected">list 3</li>
<li>list 4</li>
<li>list 5</li>
<li>list 6</li>
</ul>
</div>
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "li" ).eq( 2 ).addClass( selected );
} );
</script>
<style>
.selected { color: green; }
</style>
</head>
<body>
<div>
<ul>
<li>list 1</li>
<li>list 2</li>
<li class = "selected">list 3</li>
<li>list 4</li>
<li>list 5</li>
<li>list 6</li>
</ul>
</div>
</body>
</html>
Output
Below is the output of the above example.
- list 1
- list 2
- list 3
- list 4
- list 5
- list 6
You can also read one of our tutorial post on: Traversing DOM Elements with the help of jQuery
filter( selector ) Method
The filter( selector ) method filters all elements from the set of matched elements that do not match the specified selectors.
Syntax
Below is the syntax to use this method -
selector.filter( selector )
Parameter Details
Here is the description of all the parameters used by this methods -
- selector - It could be a comma separated list of expressions to apply multiple filters at once
Example
The following example below shows a simple usage of this method, which adds a green color to the middle class list item -
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "li" ).filter( ".middle" ).addClass( selected );
} );
</script>
<style>
.selected { color: green; }
</style>
</head>
<body>
<div>
<ul>
<li class = "top">list 1</li>
<li class = "top">list 2</li>
<li class = "middle">list 3</li>
<li class = "middle">list 4</li>
<li class = "bottom">list 5</li>
<li class = "bottom">list 6</li>
</ul>
</div>
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "li" ).filter( ".middle" ).addClass( selected );
} );
</script>
<style>
.selected { color: green; }
</style>
</head>
<body>
<div>
<ul>
<li class = "top">list 1</li>
<li class = "top">list 2</li>
<li class = "middle">list 3</li>
<li class = "middle">list 4</li>
<li class = "bottom">list 5</li>
<li class = "bottom">list 6</li>
</ul>
</div>
</body>
</html>
Output
Below is the output of the above example.
- list 1
- list 2
- list 3
- list 4
- list 5
- list 6
filter( fn ) Method
The filter( fn ) method filters all elements from the set of matched elements that do not match the specified selectors.
Syntax
Below is the syntax to use this method -
selector.filter( fn )
Parameter Details
Here is the description of all the parameters used by this methods -
- fn - The function is called with a context equal to the current element just like $.each. If the function returns false, then the element is been removed otherwise the element is kept.
Example
The following example below shows a simple usage of this method.
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "li" ).filter( function ( index ) {
return index == 1 || $( this ).attr( "class" ) == "middle";
} ).addClass( "selected" );
} );
</script>
<style>
.selected { color: green; }
</style>
</head>
<body>
<div>
<ul>
<li class = "top">list 1</li>
<li class = "top">list 2</li>
<li class = "middle">list 3</li>
<li class = "middle">list 4</li>
<li class = "bottom">list 5</li>
<li class = "bottom">list 6</li>
</ul>
</div>
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "li" ).filter( function ( index ) {
return index == 1 || $( this ).attr( "class" ) == "middle";
} ).addClass( "selected" );
} );
</script>
<style>
.selected { color: green; }
</style>
</head>
<body>
<div>
<ul>
<li class = "top">list 1</li>
<li class = "top">list 2</li>
<li class = "middle">list 3</li>
<li class = "middle">list 4</li>
<li class = "bottom">list 5</li>
<li class = "bottom">list 6</li>
</ul>
</div>
</body>
</html>
Output
Below is the output of the above example.
- list 1
- list 2
- list 3
- list 4
- list 5
- list 6
You can also read our tutorial post on: How to add Attributes to an Element using jQuery
is( selector ) Method
The is( selector ) method checks the current selection against an expression and returns the response as true, if at least one element of the set of selections fits the given selector.
If no elements fit, or the selector is not valid, then the response will be false.
If no elements fit, or the selector is not valid, then the response will be false.
Syntax
Below is the syntax to use this method -
element.is( selector )
Parameter Details
Here is the description of all the parameters used by this methods -
- selector - The expression with which to filter.
Example
The following example below shows a simple usage of this method.
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "li" ).click( function ( ) {
if ($( this ).is( ":first-child" ) ) {
$( "p" ).text( "This is list item 1" );
} else if ($( this ).is( ".middle0, .middle1" ) ) {
$( "p" ).text( "This is the middle class list" );
} else if ($( this ).is( ":contains( 'item 5' )" ) ) {
$( "p" ).text( "Its 5th list" );
}
} );
} );
</script>
<style>
.selected { color: green; }
</style>
</head>
<body>
<div>
<span>Click any list item below:</span>
<ul>
<li class = "top0">list 1</li>
<li class = "top1">list 2</li>
<li class = "middle0">list 3</li>
<li class = "middle1">list 4</li>
<li class = "bottom0">list 5</li>
<li class = "bottom1">list 6</li>
</ul>
<p>FILLER</p>
</div>
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "li" ).click( function ( ) {
if ($( this ).is( ":first-child" ) ) {
$( "p" ).text( "This is list item 1" );
} else if ($( this ).is( ".middle0, .middle1" ) ) {
$( "p" ).text( "This is the middle class list" );
} else if ($( this ).is( ":contains( 'item 5' )" ) ) {
$( "p" ).text( "Its 5th list" );
}
} );
} );
</script>
<style>
.selected { color: green; }
</style>
</head>
<body>
<div>
<span>Click any list item below:</span>
<ul>
<li class = "top0">list 1</li>
<li class = "top1">list 2</li>
<li class = "middle0">list 3</li>
<li class = "middle1">list 4</li>
<li class = "bottom0">list 5</li>
<li class = "bottom1">list 6</li>
</ul>
<p>FILLER</p>
</div>
</body>
</html>
Output
Below is the output of the above example.
Click any list item below:
- list 1
- list 2
- list 3
- list 4
- list 5
- list 6
map( callback ) Method
map( callback ) method translates a set of elements in the jQuery object into another set of values in a jQuery array which may, or may not contain elements.
You could use this method to build list of values, attributes, css values - or even perform special, custom, selector transformations.
You could use this method to build list of values, attributes, css values - or even perform special, custom, selector transformations.
Syntax
Below is the syntax to use this method -
selector.map( callback )
Parameter Details
Here is the description of all the parameters used by this methods -
- callback - The function that executes on each element in the set.
Example
The following example below shows a simple usage of this method.
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
var mappedItems = $( "li" ).map( function ( index ) {
var replacement = $( "<li>" ).text($( this ).text( ) ).get( 0 );
if ( index == 0 ) {
// Make the first item all caps
$( replacement ).text($( replacement ).text( ).toUpperCase( ) );
} else if ( index == 1 || index == 3 ) {
// Delete the second and fourth items
replacement = null;
} else if ( index == 2 ) {
// Make two of the third item and add some text
replacement = [replacement, $( "<li>" ).get( 0 ) ];
$( replacement[ 0 ] ).append( "<b> -A </b>" );
$( replacement[ 1 ] ).append( "Extra <b> -B </b>" );
}
// replacement will be a dom element, null,
// or an array of dom elements
return replacement;
} );
$( "#results" ).append( mappedItems );
} );
</script>
<style>
body { font-size: 18px; }
ul { float : left; margin : 0 30px; color: blue; }
#results { color: green; }
</style>
</head>
<body>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
</ul>
<ul id = "results"></ul>
</div>
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
var mappedItems = $( "li" ).map( function ( index ) {
var replacement = $( "<li>" ).text($( this ).text( ) ).get( 0 );
if ( index == 0 ) {
// Make the first item all caps
$( replacement ).text($( replacement ).text( ).toUpperCase( ) );
} else if ( index == 1 || index == 3 ) {
// Delete the second and fourth items
replacement = null;
} else if ( index == 2 ) {
// Make two of the third item and add some text
replacement = [replacement, $( "<li>" ).get( 0 ) ];
$( replacement[ 0 ] ).append( "<b> -A </b>" );
$( replacement[ 1 ] ).append( "Extra <b> -B </b>" );
}
// replacement will be a dom element, null,
// or an array of dom elements
return replacement;
} );
$( "#results" ).append( mappedItems );
} );
</script>
<style>
body { font-size: 18px; }
ul { float : left; margin : 0 30px; color: blue; }
#results { color: green; }
</style>
</head>
<body>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
</ul>
<ul id = "results"></ul>
</div>
</body>
</html>
Output
Below is the output of the above example.
- First
- Second
- Third
- Fourth
- Fifth
- FIRST
- Third - A
- Extra - B
- Fifth
You can also read our tutorial post on: Understanding jQuery Selectors with proper examples
not( selector ) Method
The not( selector ) method filters out all of the elements matching the specified selector from the set of matched elements.
Syntax
Below is the syntax to use this method -
selector.not( selector )
Parameter Details
Here is the description of all the parameters used by this methods -
- selector - It could be a comma separated list of expressions to apply multiple filters at once
Example
The following example below shows a simple usage of this method -
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "li" ).not( ".middle" ).addClass( selected );
} );
</script>
<style>
.selected { color: green; }
</style>
</head>
<body>
<div>
<ul>
<li class = "top">list 1</li>
<li class = "top">list 2</li>
<li class = "middle">list 3</li>
<li class = "middle">list 4</li>
<li class = "bottom">list 5</li>
<li class = "bottom">list 6</li>
</ul>
</div>
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "li" ).not( ".middle" ).addClass( selected );
} );
</script>
<style>
.selected { color: green; }
</style>
</head>
<body>
<div>
<ul>
<li class = "top">list 1</li>
<li class = "top">list 2</li>
<li class = "middle">list 3</li>
<li class = "middle">list 4</li>
<li class = "bottom">list 5</li>
<li class = "bottom">list 6</li>
</ul>
</div>
</body>
</html>
Output
Below is the output of the above example.
- list 1
- list 2
- list 3
- list 4
- list 5
- list 6
slice( start, [end] ) Method
slice( start, end ) method selects the subset of the matched elements.
Syntax
Below is the syntax to use this method -
selector.slice( start, end )
Parameter Details
Here is the description of all the parameters used by this methods -
- start - Where to start the subset from. The first element is at zero. Can be negative to start from the end of the selection.
- end - Where to end the subset excluding the end element. If unspecified, ends at the end of the selection.
Example
The following example below shows a simple usage of this method -
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "li" ).slice( 2, 5 ).addClass( selected );
} );
</script>
<style>
.selected { color: green; }
</style>
</head>
<body>
<div>
<ul>
<li class = "above">list 0</li>
<li class = "top">list 1</li>
<li class = "top">list 2</li>
<li class = "middle">list 3</li>
<li class = "middle">list 4</li>
<li class = "bottom">list 5</li>
<li class = "bottom">list 6</li>
<li class = "below">list 7</li>
</ul>
</div>
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "li" ).slice( 2, 5 ).addClass( selected );
} );
</script>
<style>
.selected { color: green; }
</style>
</head>
<body>
<div>
<ul>
<li class = "above">list 0</li>
<li class = "top">list 1</li>
<li class = "top">list 2</li>
<li class = "middle">list 3</li>
<li class = "middle">list 4</li>
<li class = "bottom">list 5</li>
<li class = "bottom">list 6</li>
<li class = "below">list 7</li>
</ul>
</div>
</body>
</html>
Output
Below is the output of the above example.
- list 0
- list 1
- list 2
- list 3
- list 4
- list 5
- list 6
- list 7
Alright guys! We have come to the end of this tutorial post on jQuery DOM filter methods. In my next tutorial post, i will be making use of few examples to demonstrate how to implement the various DOM traversing methods using jQuery.
Follow us on our various social media platforms to stay updated with our latest tutorials. Thanks for reading and bye for now.
Follow us on our various social media platforms to stay updated with our latest tutorials. Thanks for reading and bye for now.
