jQuery Find Method – The Complete Tutorial for Programmers

jQuery Find Method – The Complete Tutorial for Programmers

The jQuery Find Method returns all the descendants of the selector. The descendants are the elements that lie inside the selected element. These can be its children, children of children, children of children of children, and so on.

jQuery Find Syntax

$(selector).find(filter)
Parameter Description
Filter Required
It can be –

  • 1. An element like li (meaning: all li elements that lie inside of the selector).
  • 2. A selector expression like li > a (meaning: all anchor elements that are the first child of ‘li’ element. The ‘li’ element should be a descendant of the selector).
  • 3. A jQuery object like $(“li”).

Note – For putting multiple filter values, use comma (,) to separate each value that you want to find.

Use * to find all the descendants of the selector.

jQuery Find Method Examples

Let us understand the jQuery .find() Method by using it in 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 (descendants of listDiv), to Red.

DEMO

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 as findMe, the jQuery .find() code will be:

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

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

DEMO

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");

DEMO

4. Use * in jQuery Find to Return All Descendants

By using * you can find all the descendants of the selector.
Consider the 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>

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.

DEMO

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 (>) 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.

DEMO

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.

Let us see an example

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");

DEMO DOWNLOAD

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.

Share this article -

yogihosting

ABOUT THE AUTHOR

This article has been written by the Technical Staff of YogiHosting. Check out other articles on “WordPress, SEO, jQuery, HTML” and more.