jQuery Find

The method is intended for searching in the selection find.

It has the following use cases:

• find(selector): search in the selection of objects that match the selector
• find(element): search in the selection of objects corresponding to the given HTML element
• find(jQuery): searches a selection of objects that match a jQuery object

The find method returns a new selection on output. For example, we have the following menu markup in the form of lists:

<ul class="menu">
    <li>Point 1</li>
    <li>Item 2
        <ul class="submenu">
            <li>Subclause 2.1</li>
            <li>Subclause 2.2</li>
        </ul>
    </li>
    <li>Item 3
        <ul class="submenu">
            <li>Subclause 3.1</li>
            <li>Subclause 3.2</li>
        </ul>
    </li>
</ul>

Now let’s search for the selector, element, and jQuery object in sequence:

$(function(){
    // search by selector
    var array0 = $('ul').find('.submenu');
    array0.css('background-color', 'silver');
    
    // element search
    // get the first element of the selection
    varelem = $('ul.submenu')[0];
    var array1= $('ul').find(elem);
    array1.css('background-color', 'gray');
    
    // Find jQuery object
    var jQueryObject = $('ul.submenu');
    var array2= $('ul').find(jQueryObject);
    array2.css('color', 'blue');
});