How to locate elements in DOM with jQuery.find()

jQuery.find() means you can search for specific HTML tags, classes, or IDs without having to do time-consuming manual searches.

What is the jQuery.find() method?

By applying jQuery.find() to a specific jQuery object, you can locate elements within that object. The search is recursive. This means that not only the direct children of jQuery.find(parent) are searched, but also all nested elements in the DOM tree. The result is a new jQuery object that contains all the elements found with jQuery.find(). This can then be manipulated or used as a basis for further operations. For example, you can add a class to the object using jQuery.addClass() or append other elements using jQuery.append(). Furthermore, jQuery in WordPress allows you to easily find objects in your CMS.

What does the syntax for jQuery.find() look like?

The jQuery.find() method has the following structure:

$(selector).find(filter)

• filter: is optional and is used to further filter the found elements using additional selectors in jQuery, for example jQuery.find(class) or jQuery.find(id)

If you want to learn more about selectors, their notations and functions, you can take a look at our jQuery tutorial.

Examples for using jQuery.find()

We will demonstrate the variety of selectors you can use as filters for the jQuery.find() method with the following examples:

// Search for all <a>-elements within a <div>-element in the "container" class
$('.container').find('a');
// Search for <li>-elements within a <ul>-element with the ID "myList"
$('#myList').find('li');
// Search for all <input>-elements within a <form>-element and filter for the "text" type
$('form').find('input[type="text"]');

You can also connect additional functions easily using jQuery.find():

$("div#container").find("button").addClass("selected");

Using jQuery.find(element) in this example, we locate all the buttons in the <div> element with the ID ‘container’ and assign them the class ‘selected’.