What is jQuery find method?

The find method is used to “search” the specified element/selector to return downward descendant elements. Where a descendant can be the first level child, second level, third level and so on.

See find example online

Alternatively, you can say jQuery find method returns the child, grandchild, the great-grandchild and so on elements of the specified parent element.

For example, you have a <div> element structure as follows:

<div>

<p>some text

<span>some text</span>

</p>

</div>

In that case, the <p> is a child of div element while <span> is the grandchild or second level child of the div element.

An example of applying CSS with find method

You can use the find jQuery method to search/traverse through, by specifying div and perform some desired action(s) like changing the presentation of child element; adding some CSS, changing color, making button disabled/enabled, show/hide text boxes without reloading the web page etc.

In this guide, we will show you how to use the find method of jQuery along with online examples, but first, let us look at the general syntax of find method.

How to use the find method?

The general syntax of find method is:

$(“parent”).find(“child”);

Where the parent element can be a selector, an element etc.

In the following section, we will show you examples of using find method. We will use the find method to change first or other level child element presentation. Find by id or class and changing attributes etc.

A $.find example to add text to child elements

The example below uses the find method to add text at the end of the paragraph. A div element, which is a parent, has one paragraph (child) and the paragraph has a span child.

As you click on the button, it will add text at the end of the paragraph where we used the after method of jQuery with find method.

Experience this example online

jQuery find example to add CSS to child elements

The example below adds CSS by using find method of jQuery. As you click on “Run find method” button, the span (grandchild of div) element’s CSS will be added. A solid border line will be added by using the find method.

Note that, the find method can go to any level of the parent, whereas if you need to work at first level only you should use jQuery .children method.

Experience this example online

find by class name example

You can also specify class name in jQuery find method. The example below uses div parent element and find class name “testfind”, which is used in the span element. Then we used jQuery CSS method to add CSS.

As you click on the “Run find method” button, the border will be placed around the span element by using find method.

Experience this example online

find by id example

You can also specify the id in find jQuery method. The example below uses div parent element and find by id “testid”, which is used in the span element.

As you click on the “Run find method” button, the border will be placed around the span element by using find along with CSS method of jQuery.

Experience this example online

find by name example

You can also specify the name attribute in find method. In the example below, as you click on the button “Run find method”, the color of the text of another button which is the grandchild of div will be changed by using the name attribute.

Experience this example online

 

Useful reading: jQuery children | jQuery filter