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

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

Signature Description
.closest( selector [, context ] )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.
.closest( element )Retrieve the first element matching the specified element, starting with the current element and progressing up through the DOM tree.
.closest( jQuery object )Retrieve the first element matching the specified jQuery object, starting with the current element and progressing up through the DOM tree.

Parameters

Parameter Description Type
selectorA string containing a CSS or custom jQuery selector to match elements against.Selector
contextA DOM element within which a matching element may be found.Element
elementA DOM element to match elements against.Element
jQuery objectA jQuery object to match elements against.jQuery

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

Press the button below to action the above code:

            

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

Press the button below to action the above code:

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

Press the button below to action the above code:

Related Tutorials

jQuery Basic Tutorials - Lesson 6 - Tree Traversal