jQuery find() Function With an Example

When you want to perform actions on specific DOM element, you basically need to search that element(s) first. jQuery find function makes this task easier for you.

jQuery find function



find() function takes selector expression as a parameter and then it searches for an element which needs to be matched with a given expression.

Example:

In the below code, we will try to colour code elements in the unordered list in HTML using jQuery find().

Let’s go through code,

In the script tag, we are adding document ready function. This will make sure that the document fully gets loaded and then javascript will be applied.

Then, we are passing an expression (li.Teacher) to the $. It means to look the li element with Teacher class and then inside Teacher element using jQuery find() function find all il elements and apply CSS to it. Similar we are doing for Clerk element.

.css() is applying colour to element(s) that have been found by .find() function.

Output:

jQuery find() Function



We hope you have understood how .find() works in jQuery. Please drop a comment in below comment box if you have any doubts. In future articles, we will explore other parts of jQuery.

Tutorial Funda

Tutorial Funda will keep you updated with the latest Programming Languages, Software Tools and related technologies used in Software Development.

Leave a Reply

Your email address will not be published. Required fields are marked *