jQuery find(): A Step-by-Step Guide

The jQuery find() method may sound familiar, but don’t get it confused with the JavaScript method find()! They both “find” things, but what they return can be quite different. In JavaScript, the find() method can only be called on an array.

It takes a callback function, which is a function passed to a method as an argument, to be called later. It finds and returns the first element that satisfied the requirements outlined in the callback function.

The jQuery find() method is quite different. Like all jQuery methods, it is called on a selector. It searches within that selector and manipulates only the child elements of that selector. This high level of manipulation is useful if you want to change some elements and not others that are contained in the same parent element.

Using jQuery find()

We now know jQuery find() is used to select all child elements of a given selector. Take a look at some example code to see how to use jQuery find().

Let’s start simple and add some complexity in further sections. We can manipulate an element after the page loads to illustrate how find() works. How about we change the color of some words in the context of a paragraph once the page loads? We’ll start here:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="main">
<h2>
jQuery find() method example
</h2>
  <p>
  This is an example paragraph. 
  </p>
  <p>We are going to change the color <span>blue</span> to the color blue.</p>
<div class="green">We are going to change the word <span>green</span> to the color green.</div> 
<p>
Every other will word will stay the same. 
</p>

</div>

Look at this code and you’ll notice inside the <p> element are a few <span> elements. One of the <span> elements is a child of the <p> element. The other <span> is a child of the <div> with a class of green. As our paragraph states, we will change the color of the words wrapped in the <span> only. Make sure our HTML is rendering before we do that:

Our HTML is rendering. We are now going to change the colors of the text to illustrate find() in action. This is a great beginner’s step because we only need to change one CSS attribute to achieve this. While passing the <p> element as our selector to find(), we can use jQuery’s css() method to render the color changes:

<script>
$(document).ready(() => {
  $('p').find('span').css('color', 'blue');
  $('div.green').find('span').css('color', 'green');
})
 
</script>

In the first usage of find(), we are selecting all of the <p> elements. We use find() to locate any <span> elements that are the children of <p>. In this example, it is only the word blue. We then use the css() method to change the color to blue.

On to the second usage of find(). This time we are selecting the <div> with the class of green and calling find() on it. The method is locating another <span> element that is the child of the <div>.

Again, this is only the word green. Like the first line, we are using the css() method to change the color to green.

Let’s run it and see what happens!

Notice that both the words blue and green were wrapped in a span element with no class or id assigned. We’ve been able to still isolate those words and change their color. As you may have guessed, it is because the parent elements of the <span> are different.

The <p> is the parent of the <span> of the word blue. The <div class=‘green’> is the parent of the <span> containing the word green. 

This happened because find() locates the children of the elements used as the selector. Let’s add some complexity and look at an example of a to do list.

jQuery find() in a List

In this example, we have a to do list. We have things to do today, but we also have to buy things at the store to do them. Once we buy these items, we can mark them off the list and get on with our day! Here is our list:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="main">
<h2>
To Do list example
</h2>
<ul>
  <li class="store">Go to the store
    <ul>
      <li>Trash bags</li>
      <li>Dish Soap</li>
    </ul>
  </li>
  <li>Take out the trash</li>
  <Li>Wash the dishes</Li>
</ul>
</div>

Here we have our list. We have the <li> elements of “Go to the store,” “Take out the trash,” and “Wash the dishes,” as children of the <ul> element, which is a child of our <div> with an id of “main.” Inside of our “Go to the store” list item, we have things to buy at the store. We need trash bags and dish soap to complete our chores today. We’ve put them as a nested list as a child to the <li> with a class of store.

Now we can mark these items off the list after we buy them:

<script>
$(document).ready(() => {
  $('li.store').find('li').css('text-decoration', 'line-through')
})
</script>

We can cross out just those items on our list by selecting the <li> with the class of store and using find() to locate the children <li> elements. Again, we are using the jQuery css() method to apply a value of “line-through” to the attribute of “text-decoration”. Doing so will render the selected items with a line through them:

Conclusion

The jQuery find() method locates all child elements of the selector it is passed. The find() method will only manipulate these child elements, and not the parent itself.

Being able to differentiate what child elements to select allows us to be general and change whole sections of a page, or specific and only change certain elements of a page. It is within this flexibility that find() makes itself the most useful.

Find out more on how to learn jQuery here.