closest()
This function gets the first parent element that matches a selector, by testing the element itself and traversing up through its ancestors in the DOM tree. (In HTML, a parent is an element that contains another element.)
The function can be used for:
- The elements that match the selector of a script (see results).
- One element that matches the selector of a script that runs for "Each matched element" (see this and Setting the scope of a script).
- The elements returned by a query in the template (see query()).
To get a child element or all child elements, use children()
(see children()).
The closest()
command is based on the closest()
command found in the jQuery library: https://api.jquery.com/closest/.
To get an element's sibling element, you can use prev() or next().
closest(selector)
For one HTML element or for each element in a set, this function gets the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
selector
A String containing an HTML tag (without the angle brackets, <>).
Examples
The following script looks up all table rows in the template that contain an <input> element.
query("input").closest("tr");
This code gets the closest 'parent' row for each element that matches the selector of the script (collected in the results
object):
results.closest("tr");
The rows could be colored red within the same statement:
results.closest("tr").css('background-color','red');