.closest() JQ Home  <<  Traversal  <<  .closest()

• <<    .children()
• .find()     >>

Closest element retrieval.

Description

The .closest() method is used to retrieve the first element matching the specified selector, element or jQuery object, starting with the current element and progressing up through the DOM tree.

• The .closest() method starts to match in the current element which can be the one selected.
• Using the .closest() method without any parameters just returns an empty jQuery object.

Syntax

Parameters

Return

A jQuery object either containing the element matched or empty.

.closest( selector [, context ] ) ExamplesTraversal  <<  Top

Retrieve the first element matching the specified selector, starting with the current element and progressing up through the DOM tree optionally filtered by a context.

Ok lets go through each button press in the example below and see what we are doing:

When the left button is pressed we select the closest 'li' element to the list item marked with a class of 'list1' which is in fact itself and then change the background colour to olive.

When the middle button is pressed we select the closest 'ol' element to the list item marked with a class of 'list2' then change the background colour to orange.

When the right button is pressed we select the closest 'ol' element to the list item marked with a class of 'list3' and then change the background colour to teal. In this example we are using a DOM context to look up the DOM tree within.

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  (id of list2)
      1. Wait for tea to brew
      2. Remove teabag
      3. Pour in milk
         1. Wait for tea to brew  (id of list3)
         2. Remove teabag
2. Things To Do When I Go To Bed

$(function(){
  $('#btn32').on('click', function() {
    $('#list1').closest('li')
               .css('backgroundColor', 'olive');
  });
  $('#btn33').on('click', function() {
    $('#list2').closest('ol')
               .css('backgroundColor', 'orange');
  });
  $('#btn34').on('click', function() {
    var list2 = document.getElementById('list2');
    $('#list3').closest('ol', list2)
               .css('backgroundColor', 'teal');
  });
});

.closest( element ) Example Traversal  <<  Top

Retrieve the first element matching the specified element, starting with the current element and progressing up through the DOM tree.

In the example we create a a variable from a DOM element using selector '#btn35' (the button below). We then look for the closest 'div' element to it (the main content) and change the background colour to silver.

$(function(){
  $('#btn35').on('click', function() {
    var btn35 = document.getElementById('btn35');
    $(btn35).closest('div')
            .css('backgroundColor', 'silver');
  });
});

.closest( jQuery object ) Example Traversal  <<  Top

Retrieve the first element matching the specified jQuery object, starting with the current element and progressing up through the DOM tree.

In the example we create a jQuery object using selector '#formid2 input' (the button below). We then look for the closest 'p' element to it and change the background colour to fuchsia.

$(function(){
  $('#btn39').on('click', function() {
    var $a = $('#formid2 input');
    $($a).closest('p')
         .css('backgroundColor', 'fuchsia');
  });
});

Related Tutorials

jQuery Basic Tutorials - Lesson 6 - Tree Traversal

• <<    .children()
• .find()     >>