Saturday, May 2, 2020

A Comprehensive Guide to DOM Filter Methods in jQuery



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>

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>

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>

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.

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>

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
FILLER

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. 

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>

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>

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>

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.
Share:

0 comments:

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.