Is there an equivalent to .closest() that searches down the DOM tree instead of up?

Question

Is there an equivalent to .closest() that searches down the DOM tree instead of up?

Answer 1

The closest method does actually search down the tree (despite what the documentation says), but I know what you mean. You want one that searches among the children of the element. Depending on how you want to search:

$('#Id').children('div');

or

$('#Id').find('div');

Answer 2

You can use find() method. And get the first element from resulting set.

Answer 3

Closest is searching UP related to the documentations "For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree" and as you can see "The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well". I did not found a good solution for closest down the tree because the good thing about closest is that its stop searching elements when it find the first matched selector and find continue searching. So what you can do is to use the .first() filter.

$('selector').first();

OR

obj.find('selector').first();

It will find a match of multiple element but will return only the first element like closest but less performance.

https://api.jquery.com/first/

Answer 4

No, not with jQuery. But with pure DOM, there is for single elements:

$($element[0].querySelector('.whatever'))

What it does: Pick the first (and only?) element from your selection, run the DOM’s find() equivalent and wrap it up as jQuery again.

Compared to the other answers here, this is the only (short) way to stop wasting CPU cycles after finding the first match.—It leaves me, once again, with a bitter aftertaste of the thoughtfulness in jQuery. The DOM feels incomplete, too, no doubt, but at least they have the shortcut version of .querySelectorAll().