.find() JQ Home  <<  Traversal  <<  .find()

• <<    .closest()
• .next()     >>

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

Parameters

Return

A jQuery object either containing the elements matched or empty.

.find( selector ) Example Traversal  <<  Top

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');
  });
});

.find( element ) Example Traversal  <<  Top

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');
  });
});

.find( jQuery object ) Example Traversal  <<  Top

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');
  });
});

Related Tutorials

jQuery Basic Tutorials - Lesson 6 - Tree Traversal

• <<    .closest()
• .next()     >>