Filtering Elements with jQuery .filter() method

Use jQuery Filter method to select elements based on certain criteria. Example – with .filter() method you can select all p elements in your page that has a certain class.

The below .filter() method returns all p elements with class as blackColor.

$("p").filter(".blackColor ");

Syntax of jQuery Filter method

$(selector).filter(selection,function(index))

Example 1: Filter all Paragraphs having class as “testClass”

These are the following p elements present on the page.

<p class="testClass">Paragraph with "testClass"</p>
<p class="testClass">Paragraph with "testClass"</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p class="testClass">Paragraph with "testClass"</p>

To filter out all those p that has CSS Class as testClass. I will use the .filter() method like this.

$("p").filter(".testClass").css("color", "Red");

The will turn their color to Red.

Example 2: Filter all Paragraphs having class as “testClass” or id as “test”

There are 2 filter conditions:

• a. To select paragraphs having class testClass.
• b. To select all paragraphs having id as test.

My page HTML is:

<p class="testClass">Paragraph with "testClass"</p>
<p id="test">Paragraph with id "test"</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>

I will use these 2 conditions on the .filter() method separated by comma.

So the jQuery Filter method code to select these paragraphs and turn their color Red will be.

$("p").filter(".testClass,#test").css("color", "Red");

Here the first 2 p elements will be turned Red.

Example 3: Filter with jQuery object – Here select 3rd paragraph only

I have some p elements on my page:

<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>

I will use a jQuery Object with .filter() method. In this jQuery object I will use jQuery jquery-nth-child method to select the 3rd paragraph.

The 3rd paragraph color is turned to Red.

$("p").filter($("#div3 p:nth-child(3)")).css("color", "Red"); 

Example 4: Filter paragraphs using function – Select Paragraphs with 3 span elements

Now I will show the use of function parameter of the filter method.

My page HTML is:

<p>A p element <span>with one span element.</span></p>
<p>A p element <span>with</span> three <span>span</span><span> elements.</span></p>
<p>A p element <span>with one span element.</span></p>
<p>A p element <span>with</span> two <span>span elements.</span></p>
<p>A p element with no span element.</p>

The jQuery filter method code to select paragraphs having 3 span elements will be:

$("#div4 p").filter(function () {
    return $("span", this).length == 3;
}).css("color", "Red");

Here the 2nd paragraph will be turned Red.

Example 5: Filter even or odd elements

Similarly, I can use jQuery Filter method to extract even or odd element.

For filtering even paragraphs

$("p").filter(":even");

For filtering odd paragraphs

$("p").filter(":odd");

Download the source code: