🚨 Time is Running Out: Reserve Your Spot in the Lucky Draw & Claim Rewards! START NOW

Code has been added to clipboard!

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

Reading time 2 min
Published Jun 5, 2019
Updated Sep 30, 2019

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.
  • 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
  • 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
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

.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(() => {
    "color": "blue",
    "border": "2px solid green"

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

$(document).ready(() => {
    "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.