How to get the Closest Matching Element with jQuery

John on February 08, 2021

In this tutorial, we will learn how to get the closest HTML element relative to another in a variety of different ways using jQuery.

Find the Next Element with jQuery

To find the next element with jQuery, use the next() method.

<div class="first">First</div>

<div class="second">Second</div>

<div class="third">Third</div>

<div class="fourth">Fourth</div>

var next = $('.second').next();

console.log(next.attr('class'));

third

Find the Next Element with a Class

To get the next element with a class attribute regardless of how many elements are between it and the current element, use the nextAll() jQuery method. Pass the class name as the first argument.

<div class="fourth">Fourth</div>

<div class="first">First</div>

<div class="second">Second</div>

<div class="third">Third</div>

<div class="fourth">Fourth!</div>

var next = $('.second').nextAll('.fourth');

console.log(next[0].innerText);

Fourth!

Find the Previous Element with jQuery

Use the jQuery prev() method to get the previous element.

<div class="fourth">Fourth</div>

<div class="first">First</div>

<div class="second">Second</div>

<div class="third">Third</div>

<div class="fourth">Fourth!</div>

var next = $('.second').prev();

console.log(next[0].innerText);

First

Find the Previous Element with a Class

To get a previous element with a class, use the jQuery prevAll() method and pass the class as the first argument.

<div class="fourth">Fourth</div>

<div class="first">First</div>

<div class="second">Second</div>

<div class="third">Third</div>

<div class="fourth">Fourth!</div>

var next = $('.second').prevAll('.fourth');

console.log(next[0].innerText);

Fourth

Find Closest Parent with Class or ID

To find the closest parent element use the jQuery closest() method. It works by traversing up the DOM from the starting element and accepts any type of selector to look for – the example below demonstrates finding the closest parent with a class name.

<div class="foo">
  <div class="bar"></div>
</div>

var next = $('.bar').closest('.foo');

console.log(next[0].innerHTML);

<div class="bar"></div>

Traversing into Another Element

Let's say we want to start from a nested element, traverse up to an element then look for another element. This can be done in jQuery by using a combination of the closest() and find() methods like this:

<div class="row">
  <div class="col-4">
   <input type="text" name="thing" id="thing" class="foo">
  </div>

  <div class="col-4">
   <input type="text" name="bar" id="bar" class="foo">
  </div>

  <div class="col-4">
   <button type="button" id="click">Click</button>
  </div>
</div>

$('#click').click(function() {
  var obj = $(this).closest('.row').find('.foo');

  console.log($(obj[0]).attr('name'));
});

thing

find() returns an iterable object of all matching elements. All matching elements could be looped through like this:

<div class="row">
  <div class="col-4">
   <input type="text" name="thing" id="thing" class="foo">
  </div>

  <div class="col-4">
   <input type="text" name="bar" id="bar" class="foo">
  </div>

  <div class="col-4">
   <button type="button" id="click">Click</button>
  </div>
</div>

$('#click').click(function() {
  var obj = $(this).closest('.row').find('.foo');

  for (let i of obj) {
   console.log($(i).attr('id'));
  }
});

thing
bar