jQuery filter vs find: What’s the difference?

If you are using jQuery it is important to understand the difference between the jQuery filter and find methods. They often get used incorrectly which means you won’t be selecting the right elements on your webpage. 

The find() method searches all of the child elements of the currently selected items by traversing the DOM from root to leaf. But the filter() method finds a list of elements, then passes over them, and only returns the items that match the specified selector.

jQuery has been around for a long time but it’s not the first thing people think about when learning JavaScript However, it is the foundation of a lot of legacy web applications So, understanding how the different methods work is likely to be relevant for a  while longer.

The two methods are used in different situations so it’s important to properly understand how they both work. Let’s take a closer look at how the jQuery filter and find functions work. 

What is the difference between jQuery filter and find

The major difference between jQuery filter and find is how it searches through elements. jQuery find() searches through the children of the selected items and returns any that match. But jQuery filter() finds a list of elements, then only returns the items that match the selector provided. 

Learning JavaScript can be enough to land you your first job in development so nailing the basics is crucial. jQuery has fallen out of favor with the development community but still is still widely used in legacy systems and to create custom posts in WordPress.

Code always works best with examples and the find and filter methods are no different. Let’s take a look at how each of them works.

You can find a working example at the below code on our JSFiddle account here. Feel free to play around with the syntax to get a better understanding of how it works. 

For each of the examples, we will be using the HTML and CSS below.

<style>
  .container{
   margin: 30px;
   width: 650px;
   border: 2px solid lightgrey;
  }
  .container * {
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 10px;
  }
</style>

<div class="container green">
  <div class="green">
    
  </div>
  <div class="red">
    
  </div>
</div>
<div class="container green">
  <div class="green">
    
  </div>
  <div class="green">
    <div class="secret-green">

    </div> 
  </div>
  <div class="orange">
    
  </div>
</div>
<div class="container green-other">
  <div class="red">
    
  </div>
  <div class="green">
    <div class="secret-green">

    </div> 
  </div>
</div>

The above code and styling render this:

jQuery find()

As per the documentation, the find method gets all of the specified child elements for each of the match items. What does that look like in practice? 

$(".container").find(".green").css({"border": "2px solid blue"});

The above code is asking jQuery to find all elements with a class of ‘container’. Then for each of the items search through the descendants and find every element with a class of “green’. Once these have been found, add a blue border with a thickness of 2px. Using the HTML and CSS above, you would get the result below. 

In the example, we provided each div with a class of container has been selected. Then for each of these the find() method scans the child elements and selects those with a class of green. The first and last container have one matching element, the second has two.

jQuery filter()

The filter method is used to reduce a set of matched elements down to only those that match the selector. The selector is used as a test to either include the element or leave it out. 

Unlike find(), filter() does not traverse down into the selected element’s children. Let’s take a look at how this manifests itself in real code.

$(".container").filter(".green").css({"border": "2px solid green"});

The code above is asking jQuery to find all elements that have a class of “container”. Then only return the elements that also have a class of “green”. Then add a green border that is 2px thick. Using the same HTML and CSS as above renders the below.

In our HTML three of the top-level divs have a class of green. However, only two of them have a class of “green”. The other has a class of “green-other” so fails the test that the filter function put it through. The child elements of the divs are irrelevant because the filter function does not traverse descendants. 

Using jQuery filter and find together

The beauty of jQuery and JavaScript, in general, is the ability to be able to chain multiple methods together. The filter and find functions are not mutually exclusive or competing. You can use both together to select elements.

The below is a contrived example but a good way to demonstrate how you could chain the two methods together for optimum results. 

$(".container").filter(".green").find(".secret-green").css({"border": "2px solid red"});

We are asking jQuery to find all elements with a class of “container” that also have a class of “green”. For each of the matching elements, jQuery then searches through all of their child elements until it finds those with a class of “secret-green”. It then adds a red border with a thickness of 2px.

Should you use jQuery filter() or find()?

You should use find() when you want to search through the descendants and filter() when you want to reduce a set of matched elements down based on another selector. The two methods aren’t in competition and both work incredibly well for their purpose. 

As we demonstrated above the two functions can be chained together to help help you find child components inside of a filtered list of elements. If you still have any doubts about how they both work, have a play around with them yourself. I recommend using solutions like Replit, Codepen, or JSFiddle to bring your code to life in the browser. It’s far simpler than having to set up all of the boilerplate yourself just to test a few things out. They have all of the most recent frameworks and libraries to choose from and will have you up and running almost instantly.