jQuery Find Method – The Complete Tutorial for Programmers

The jQuery Find Method (.find()) returns all the descendants of the selector. The descendants are the elements that lie inside the selected element. These can be it’s children, children of children, children of children of children, and so on.

jQuery .find() Syntax

$(selector).find(filter)

jQuery Find Method Examples

Let us understand the jQuery .find() Method by seeing few examples. I give you 6 examples of .find() method.

1. Using jQuery .find() Method to Find Elements

Suppose you have to find all the li elements from the below HTML:

<div class="listDiv">
    <ul>
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
        <li>Fourth</li>
        <li>Fifth</li>
    </ul>
    <p>Paragraph Text</p>
    <p>Paragraph Text</p>
</div>

To do this use jQuery Find method like:

$(".listDiv").find("li").css("color","Red");

This will change the color of all li elements, that are inside of listDiv (i.e. descendants of listDiv), to Red.

2. Using jQuery .find() Method to Find a Single Element

Now in the same HTML, I will find the li element that contains the findMe CSS class.

The HTML of the page:

<div class="listDiv">
    <ul>
        <li>First</li>
        <li>Second</li>
        <li class="findMe">Third (Find Me)</li>
        <li>Fourth</li>
        <li>Fifth</li>
    </ul>
    <p>Paragraph Text</p>
    <p>Paragraph Text</p>
</div>

To find the li element that has the CSS class called findMe, the jQuery .find() method code will be:

$(".listDiv").find(".findMe").css("color", "Red");

This will change the color of Third (Find Me) li element to red.

3. Use Comma (,) in jQuery Find to Return Multiple Descendants

Use comma (,) in order to find multiple descendants. Consider this HTML:

<div class="listDiv">
    <ul>
        <li class="first">First</li>
        <li class="second">Second</li>
        <li class="third">Third</li>
        <li class="fourth">Fourth</li>
        <li class="fifth">Fifth</li>
    </ul>
    <p>Paragraph Text</p>
    <p>Paragraph Text</p>
</div>

To find the first, third & fifth li elements and both the p elements , the jQuery Find code will be:

$(".listDiv").find(".first,.third,.fifth,p").css("color", "Red");

4. Use * in jQuery Find to Return All Descendants

By using * you can find all the descendants of the selector. Consider the HTML shown below:

<div class="listDiv">
    <ul>
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
        <li>Fourth</li>
        <li>Fifth</li>
    </ul>
    <p>Paragraph Text</p>
    <p>Paragraph Text</p>
</div>

I use (*) in jQuery Find method to select all of its descendants:

$(".listDiv").find("*").css("color", "Red");

The Code will change the color of all ul, li and p elements to red.

5. Using jQuery .find() Method to Find an Expression

Suppose you have to find the direct child of a selector. Here you can create the direct child expression with (>) and then find the element/elements.

Consider the HTML:

<div class="listDiv">
    <ul>
        <li>Li<a href="#">Anchor<span>First Span</span></a></li>
        <li>Li<span>Second Span</span></li>
    </ul>
</div> 

To find the span elements that are the direct child of li elements, you can use the .find() method like:

$(".listDiv").find("li > span").css("color", "Red");

Here only the Second Span will be colored red as it is the direct child of li element.

6. Using jQuery .find() Method to Find a jQuery Object

You can also pass jQuery Object for the filter value.

See the below example where I am finding all the span elements using jQuery Object.

var searchObject=$("span");
$(".listDiv").find(searchObject).css("color", "Red");

This is same as:

$(".listDiv").find("span").css("color", "Red");

By using jQuery Object for filter value you can build sharp codes in just one of the two lines.

Suppose there is a paragraph that contains number of links. You want to highlight only those links that are linking to a certain website.

Let the paragraph be:

<p>Internet is full of search engines like 
<a href="http://www.google.com">Google</a>, 
<a href="http://www.yahoo.com">Yahoo</a>, 
<a href="http://www.bing.com">Bing</a> and 
<a href="https://duckduckgo.com/">DuckDuckGo</a>. 
<a href="http://www.google.com">Google</a> is the largest of them all 
while <a href="https://duckduckgo.com/">DuckDuckGo</a> is the 
smallest in terms of number of search they receive per month. Unlike 
others <a href="https://duckduckgo.com/">DuckDuckGo</a> has a very 
special feature, it respect user privacy and does not tracks them. 
So you can do all types of searches in 
<a href="https://duckduckgo.com/">DuckDuckGo</a> and be sure that no 
body is tracking you.</p>

It has links to Google, Yahoo, Bing and DuckDuckGo. I want to change the color of ‘DuckDuckGo’ links only.

To do this I first create a jQuery Object that contains all ‘DuckDuckGo’ links. Then I keep this jQuery Object in the filter value of my jQuery Find Method.

Here is the code that does this work.

var duckDuckGo = $("a[href='https://duckduckgo.com/']");
$("p").find(duckDuckGo).css("color", "Red");

In just 2 lines I managed to change the color of DuckDuckGo links to red.

Isn’t this a great feature to have in jQuery?

Please check the download link given below:

DOWNLOAD