jQuery can return one, or multiple HTML elements in the matched set. jQuery.filter() reduces the elements in that matched set, based on a criteria that you provide.
Most front-end web developers understand that jQuery literally queries the DOM, and returns a set of elements that match the CSS-like text string that you pass to the jQuery function (AKA: “$()“). But what if you want to further refine that query? Using jQuery.filter(), you can tell jQuery things such as: “Filter out the ODD elements”, or “Filter out the elements that have the word “automobile” in their text”, and so on.
One of the things that makes the jQuery.filter method so powerful, is that you can not only pass a string to it, but also a function. Passing a function allows you to write code that programmatically tells jQuery exactly how to reduce the matched set. See Examples # 2 and # 3 below for more information about passing a function to the jQuery.filter method.
Example # 1
See the Pen jQuery.filter Basics – Part 1 by Front End Video (@frontendvideo) on CodePen.
In Example # 1, we have an unordered list that contains the seven days of the week. We want to apply some custom styles to only the even elements returned in the query. So, we use jQuery.filter(). We pass the string “:even” to jQuery.filter, which tells this method to return only the even elements (that is, element # 0, element # 2, element # 4, element # 6, and so on). As a result, only the days Monday, Wednesday, Friday and Sunday have the custom style applied. This is because the jQuery.filter method filtered the matched set down to those elements only, and returned a new set of only those elements. We then chained the .css method to that set, and applied the class “styled“, which adds some padding and the background-color: #FFB347.
Example # 2
See the Pen jQuery.filter Basics – Part 2 by Front End Video (@frontendvideo) on CodePen.
In Example # 2, we pass a function to the jQuery.filter method. In this function, we use the JavaScript modulus operator, telling jQuery that we only want every 5th element in the matched set. As a result, every 5th item in our unordered list has the custom styles applied. Don’t be misled by the simplicity of this example. Passing a function to the jQuery.filter method provides a tremendous amount of power. In this case we simply indicated that we wanted every 5th element, but because we are using a function, the code you write in order to filter out the matched set is limitless.
Example # 3
See the Pen jQuery.filter Basics – Part 3 by Front End Video (@frontendvideo) on CodePen.
In Example # 3, we once again pass a function to the jQuery.filter method. In this case, we tell jQuery that we want to reduce the matched set down to only the elements whose text is less than six characters. As a result, only the word in the list with five characters or less have the custom styles applied. Play with the example code yourself. For example, change this: return $(this).text().length < 6; to THIS: return $(this).text().length < 8;. Notice how the number of list items with custom styles changes. This is because you have changed the criteria passed to the jQuery.filter method by changing the code in the function.
Summary
When you query the DOM, When jQuery returns one, or multiple HTML elements in the matched set, so depending on how you organize your code, you may want to further refine that matched set. The jQuery.filter() method allows you to determine how that matched set is further refined, and what makes the jQuery.filter() method so powerful is the fact that the argument you provide can be as simple as a string, or as complex as a function. Passing a string is surprisingly flexible, and passing a function provides exponential power, as you can programmatically determine the result set that the filter will return.
