Javatpoint Logo
Javatpoint Logo

jQuery find() method

The find() method in jQuery finds the descendant elements of the given selector. A descendant can be a child, grandchild, and so on. It is an inbuilt method in jQuery. For searching the descendant, the find() method traverse downwards from the selected element in the DOM tree.

We can use the "*" selector for returning all descendant elements. To return all descendant elements of the given selector, we have to write it as follows.

This children() method works similarly to the find() method. Unlike the find() method, the children() method traverse a single level down the DOM tree, i.e., it returns the direct children.

The syntax of using the find() method is given as follows:

Syntax

This method requires a single parameter value that is filter. This value can be a selector expression, an element or a jQuery object. It filters the search for descendants.

Let's understand the find() method using some illustrations.

Example1

In this example, there are two div elements along with two ul elements, a heading h2, and a paragraph element.

Here, we are finding the ul descendants of the div element with id = "div1". The find() method will return the ul elements that are descendants of the corresponding div element. It will continue the searching until it finds the specified element.

We have to click the given button to get the ul descendant of the div element.

If we use the children() method, it will return the direct children of the specified selector.

Test it Now

Output

After the execution of the above code, the output will be -

jQuery find() method

After clicking the given button, the output will be -

jQuery find() method

Example2

In this example, we are returning multiple descendants of the given selector. Here, we are separating each expression by a comma to return the multiple descendants.

Test it Now

Output

After the execution of the above code, the output will be -

jQuery find() method

After clicking the given button, the output will be -

jQuery find() method

Example3

In this example, we are finding all descendant of the div element with id = "div1". Here, we are using the "*" selector for returning all descendant elements.

Test it Now

Output

After the execution of the above code, the output will be -

jQuery find() method

After clicking the given button, the output will be -

jQuery find() method




Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA