jQuery .closest() Method

What Is .closest()?

.closest(selector) (since jQuery 1.3) finds the first element that matches by testing the current element, then walking up through ancestors. Returns a new jQuery set with at most one match per starting element. Does not change the DOM.

$("li.item-a").closest("ul");              // nearest ul ancestor
$("li.item-a").closest("li");              // matches self first
$("li.item-a").closest("ul", contextEl);   // limit search (since 1.4)
$(event.target).closest("li");             // common in click handlers

// closest → start at self, stop at first match (0 or 1)
// parents  → start at parent, collect all matches up the tree

How to Use .closest()

Start from a node, pass a selector, get the nearest match upward (or self).

1. Select a starting element (or use event.target).
2. Call .closest("selector") — tests self first, then parents.
3. Stop at the first match; empty set if none.
4. Optional: pass a context element to bound the search (1.4+).
5. Chain methods on the result, or check .length.

Pseudocode

call $(starts).closest(selector, context?)

result = empty set
for each start in the matched set:
    node = start
    while node is not null:
        if context is set AND node is outside context:
            break
        if node matches selector:
            add node to result
            break
        node = node.parentElement

return result as a new jQuery object

Cheat Sheet

Keep these differences next to .parents().

Live Preview

From li.item-a, run .closest() or .parents() and compare results.

Ready — choose a call and click Run.

jQuery Examples

Short, copy-ready snippets. Open DevTools, or use Try It Yourself for a live editor.

$("li.item-a").closest("ul").append(" [closest ul]");

ul.level-2 gets [closest ul]
Outer #one list is not tagged (farther up)

$("li.item-a").closest("li").append(" [self]");

A [self]
Ancestor li#ii is not selected

var listItemII = document.getElementById("ii");
$("li.item-a").closest("ul", listItemII).append(" [in II]");
var outer = $("li.item-a").closest("#one", listItemII).length;
$("#log").text("#one with context II → length " + outer);

level-2 ul → [in II]
#one with context II → length 0

$(document).on("click", function (event) {
  var $li = $(event.target).closest("li");
  if (!$li.length) return;
  if ($li.attr("data-on") === "1") {
    $li.find("[data-mark]").remove();
    $li.removeAttr("data-on");
  } else {
    $li.append(" [on]");
    $li.attr("data-on", "1");
  }
});

Click "Click me!" inside a span
→ nearest li toggles [on]
Works even when the click is not on the li itself

var start = $("li.item-a");
$("#out").text(
  "closest ul: " + start.closest("ul").length + "\n" +
  "parents ul: " + start.parents("ul").length + "\n" +
  "closest li text: " + start.closest("li").contents().first().text().trim() + "\n" +
  "parents li count: " + start.parents("li").length
);

closest ul: 1
parents ul: 2
closest li text: A
parents li count: 1

Performance Notes

.closest() usually stops early. Prefer it over .parents() when you only need the nearest match.

Key Takeaways