Opposite of closest in javascript
I have a code with lots of submenus that share the same class name. Show Here's a structure: .menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .elem .elem .sub-menu Note that .sub-menu may be infinite levels deep. So how do I achieve this: when .elem is clicked, I want to travers the DOM upwards until the top-most .sub-menu is reached and apply a style to it. I am aware of .closest() and .parent() and .find(), but I have no idea if jQuery has such feature such as .topMost(selector)? The only way I can think of is maybe running a loop and going through .closest('.sub-menu') of the new element until its length is zero (there are no more parents with this class, so it must be the top-most). However, I think there should be a more practical approach to this. Here’s a boil-down on the jQuery’s jQuery’s
Essentially, the closest function has two things:
Here's our example markup that we'll be working with:
Imagine you want to do something to the
That's not too bad, but what if you need to traverse longer distance? Or if you add a wrapper there you need to update the code. Closest is made just for these kinds of thing:
You give the starting point Pure JavaScript closestByClass functionBelow is vanilla JavaScript function that gets the closest by class name. From it, you can see much more in detail how the closest function really works:
Example usage:
That's nice and all, but it only takes class names, it's easy to make it check for ID, just replace the Recursive pure JavaScript closestHere's a more flexible function that uses recursion and is a bit shorter:
Or write it as one-liner with an arrow function:
That's quite dense. Let's look at the usage with the example list we used earlier. Note how easy it is to target class, id, or tag name:
Now the This method is unbelievably light and versatile! It originates to this great SO answer. Here's a little demo. Pure JavaScript closest demo What does closest to in JavaScript?The closest() method in JavaScript is used to retrieve the closest ancestor, or parent of the element matches the selectors. If there is no ancestor found, the method returns null.
What does the element closest () method take as its argument and what does it return?The closest() method searches up the DOM tree for elements which matches a specified CSS selector. The closest() method starts at the element itself, then the anchestors (parent, grandparent, ...) until a match is found. The closest() method returns null() if no match is found.
What is closest in jQuery?The closest() method returns the first ancestor of the selected element. An ancestor is a parent, grandparent, great-grandparent, and so on. The DOM tree: This method traverse upwards from the current element, all the way up to the document's root element (), to find the first ancestor of DOM elements.
How do you select all ancestors of an element?To select all ancestor elements of an element, the parents() method is used. This method is used to find all the parent elements related to the selected element. This method traverse all the levels up the selected element and return that all elements.
|