Sometimes we want to target an element that lives inside another, but we don’t want to use the .children()
method, since that might target more elements than we need. That’s where the .find()
method comes in. This method finds and targets singular or multiple elements that are descendants of an element. Unlike the .children()
method, it traverses all descendants of the specified element, not just the first level down.
const $items = $('.myList').find('li');
The .find()
method takes a parameter that specifies how to filter results. This parameter is just like anything you might use to select a jQuery object, ('#id'
, '.class'
, tag
, etc.). .find()
will return all descendants that match the passed in selector. In the example above, the .find()
method will return all <li>
child elements inside the '.myList'
element.
Instructions
Let’s use .find()
to make the arrow in the .more-details-button
rotate when it is selected.
Inside of the .more-details-button
click event, create a jQuery object with the current element ($(event.currentTarget)
).
Use the .find()
method to find the img
inside the current element.
Chain a .toggleClass()
method to .find()
and add or remove the 'rotate'
class.