jQuery filter()

The filter() method returns the elements matching the specified criteria. If elements do not match the criteria, they are removed from the selection.

It can take a selector or a function as its arguments for filtering the set of matched elements. When using selector, the method filters the elements don't match the given selector. If we use function, the method filters the elements that don't match the given function. Generally, this method is used to reduce the search for an element in the set of selected elements.

Syntax

Using selector

Using function

The parameter values of this function are defined as follows.

selector: It is an optional attribute. It could be a JQuery object or a selector expression. We can also use the comma-separated list of expressions to apply multiple filters at once. It can be written as follows:

function: It is also an optional parameter. This parameter specifies a function that runs for every element in the group. The element is kept if the function returns true. Otherwise, on returning false, the element is removed.

The index argument represents the position of the element in the set. It begins with the 0 position.

Let's see some examples to understand how to use the filter() method.

Example1

In this example, we are using the selector attribute of the filter() function. Here, the filter() function returns all paragraph elements with class name para. There are some div elements, paragraph elements and others. There are three paragraph elements out of four related to the class para.

We have to click the given button to see the result.

<!DOCTYPE html>
<html>
<head>
<style>
div{
font-size: 20px;
font-weight: bold;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function fun(){
$(document).ready(function(){
  $("p").filter(".para").css({"background": "yellow"});
});
}
</script>
</head>

<body> 
<h2> Welcome to the javaTpoint.com </h2>   
<h4>This is an example of using the jQuery's filter() method. </h4>
  <div id = "div1"> This is first div element. </div>

          <p class = "para"> This is first paragraph element </p>
		  <div id = "div2"> This is second div element. </div>
		  <p class = "para"> This is second paragraph element </p>
		  <p class = "para"> This is third paragraph element </p>
<p> Click the following button to see the effect. </p>
<button onclick = "fun()"> click me </button>
  </body>
</html>

Test it Now

Output

After clicking the button, we can see that the function returns the paragraph elements related to the class name para.

Example2

In this example we are using the function(index) parameter of the filter() function.. Here, the function highlights the paragraph elements with index position 1, 3, and 5. Because the index begins with 0 so, it highlights the paragraph on even position.

<!DOCTYPE html>
<html>
<head>
<style>
p{
font-size: 20px;
font-weight: bold;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function fun(){
$(document).ready(function(){
  $("p").filter(function(index) {
  if(index == 1 || index == 3 || index == 5){
  return true;
  }
  }).css({"background": "yellow"});
});
}
</script>
</head>

<body> 
<h2> Welcome to the javaTpoint.com </h2>   
<h4> This is an example of using the jQuery's filter() method. </h4>
  <p class = "para1"> P1 </p>
          <p class = "para2"> P2 </p>
		  <p class = "para3"> P3 </p>
		  <p class = "para4"> P4 </p>
		  <p class = "para5"> P5</p>
<p class = "para6"> P6 Click the following button to see the effect. </p>
<button onclick = "fun()"> click me </button>
  </body>
</html>

Test it Now

Output

After the execution of the above code, the output is -

After clicking the given button, we can see that the function return the paragraph elements with index positions 1, 3, and 5. The position of the index starts at 0.