Better way to nest javascript closest (not jQuery)

Question

I use vanilla javascript, no jQuery.

In my code I have something that looks like this:

item.closest('ul').closest('li').closest('ul').classList.add('active');

While it works, it does not look that nice. I repeat closest three times.

Is it possible to so something smarter in this case?

So `.closest()` is your own definition? I'll go with adding `class` so that it's not like `.parentNode.parentNode`! — Praveen Kumar Purushothaman, May 18 '18 at 08:23
If the markup is what I would expect (without seeing it), you can at least remove the middle `.closest("li")` — Reinstate Monica Cellio, May 18 '18 at 08:29
Possible duplicate of [Opposite to jQuery's .Closest (Top/Far-Most?)](https://stackoverflow.com/questions/14787618/opposite-to-jquerys-closest-top-far-most) — Reinstate Monica Cellio, May 18 '18 at 08:30
I'm pretty sure you cannot make it shorter without writing a function that builds the chain. Since you want to select the parent, you'd need the [has](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) css selector to make it shorter (`item.closest('ul:has(li ul)')`) but it is not supported by all browsers — Ebatsin, May 18 '18 at 08:37
Can't you add a class to the target `ul` and select it with `closest`? Something like this: `item.closest('ul.my-ul').classList.add('active')`. — mrlew, May 18 '18 at 08:43
@JensTörnell I never talked about using jQuery, the [has selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) is a standard css selector level 4. It is just not usable now because of browser support — Ebatsin, May 18 '18 at 08:44

score 1 · Accepted Answer · answered May 18 '18 at 08:55

There is no standard way of making this shorter.

You can:

Add a class to the element you are trying to select. That would make your selector look like this : item.closest('ul.myClass').classlist.add('active')

Create a function that wraps the closest chain creation :

function closestChain(item) {
    return Array.from(arguments).reduce((acc, val) => {
        return acc.closest(val);
    });
}

closestChain(item, 'ul', 'li', 'ul').classlist.add('active');

Or you can wait for the has CSS selector to be available

Better way to nest javascript closest (not jQuery)

1 Answers1