.find()S2C Home « Traversal « .find()

Descendant element retrieval.

Description

The .find() method is used to retrieve the descendants of each element in the current matched set, filtered by a specified selector, element or jQuery object.

  • Use the .children() method instead if you only want to go down one level to retrieve the immediate children.
  • Using the .find() method without any parameters just returns an empty jQuery object.

Syntax

Signature Description
.find( selector )Retrieve the descendants of each element within the matched set that matches the specified selector.
.find( element )Retrieve the descendants of each element within the matched set that matches the specified element.
.find( jQuery object )Retrieve the descendants of each element within the matched set that matches the specified jQuery object.

Parameters

Parameter Description Type
selectorA string containing a CSS or custom jQuery selector to match elements against.Selector
elementAn element to match elements against.Element
jQuery object A jQuery object to match elements against.jQuery

Return

A jQuery object either containing the element matched or empty.

.find( selector ) ExampleTop

Retrieve the descendants of each element within the matched set that matches the specified selector.

In the example below we select 'li' descendants of the '#list1' 'li' element and turn the background colour to yellow.

  1. Things To Do When I Get Up  (id of list1)
    1. Put The Kettle On
    2. Put The Teabag in The Cup
    3. Wait for Kettle To Boil
    4. Pour Boiling Water In The Cup
      1. Wait for tea to brew
      2. Remove teabag
      3. Pour in milk
        1. Wait for tea to brew
        2. Remove teabag
  2. Things To Do When I Go To Bed


$(function(){
  $('#btn36').on('click', function() {
    $('#list1').find('li')
               .css('backgroundColor', 'yellow');
  });
});

Press the button below to action the above code:


.find( element ) ExampleTop

Retrieve the descendants of each element within the matched set that matches the specified element.

In the example below we create a variable containing the element with an id of 'list2'. We then do a find on this element from the li item with an id of 'list1a'.

  1. Things To Do When I Get Up
    1. Put The Kettle On
    2. Put The Teabag in The Cup
    3. Wait for Kettle To Boil
    4. Pour Boiling Water In The Cup  (id of list1a)
      1. Wait for tea to brew
      2. Remove teabag
      3. Pour in milk
        1. Wait for tea to brew  (id of list2)
        2. Remove teabag
  2. Things To Do When I Go To Bed


$(function(){
  $('#btn37').on('click', function() {
    var list2 = document.getElementById('list2');
    $('li #list1a').find( list2 )
                   .css('backgroundColor', 'teal');
  });
});

Press the button below to action the above code:


.find( jQuery object ) ExampleTop

Retrieve the descendants of each element within the matched set that matches the specified jQuery object.

In the example below we create a jQuery object containing elements with a class of 'list3'. We then do a find on this jQuery object from the li item with an id of 'list1b'.

  1. Things To Do When I Get Up
    1. Put The Kettle On
    2. Put The Teabag in The Cup
    3. Wait for Kettle To Boil
    4. Pour Boiling Water In The Cup
      1. Wait for tea to brew  (class of list3)
        1. tea brewed
        2. Remove teabag
      2. Remove teabag
      3. Pour in milk  (class of list3)
        1. Wait for tea to brew
        2. Remove teabag
  2. Things To Do When I Go To Bed


$(function(){
  $('#btn38').on('click', function() {
    var $listitem = $('li .list3');
    $('li #list1b').find( $listitem )
                   .css('backgroundColor', 'orange');
  });
});

Press the button below to action the above code: