jQuery .find() Explained: Learn to Find Children of Elements

The jQuery .find() is a method to retrieve descendants of elements according to the indicated selector. In other words, you can look through descendants of elements in the DOM tree. As a result, the function can generate an object, representing the detected elements.

This tutorial reviews the jQuery .find() function which might seem similar to the children() method. However, the children function is capable of only searching a single level down the DOM tree.

Continue reading this tutorial to learn how to jQuery find children according to the provided selector. While this function is used to retrieve children of elements, the .parent() function will also help jQuery find parents.

jQuery find: Main Tips

• jQuery .find() method is applied when developers need to retrieve children of specified elements. The elements are searched according to the indicated selector.
• After the jQuery find child function is applied and matches are detected, a new object is created to represent them.

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

.find() Explained

The method returns the direct children of the element you select, and uses syntax like this:

$(selector).find(selector | elements)

To illustrate how this method is used, we have a few examples:

// returns all direct descendants

$(document).ready(() => {
  $("div").find("*").css({
    "color": "blue",
    "border": "2px solid green"
  });

// returns all direct descendants that are <p> elements

$(document).ready(() => {
  $("div").find("p").css({
    "color": "blue",
    "border": "2px solid green"
  });

The jQuery find accepts one argument that can be one of two types: a selector or an element. In this context, elements can be jQuery objects or other DOM elements.

If you need to retrieve jQuery find parent of elements, you should take a look at the jQuery .parent() function. In cases when you need to jQuery find first child, you should include $(":nth-of-type") selector in the .find() function. It will retrieve the first children of their parents.

jQuery find: Summary

• jQuery find method detects children of specified elements. The searching process depends on the selector expression.
• The result of the jQuery find child function is an object, representing the discovered matches.