[Feature Request] find path for multiple elements and find closest common parent

[pascalwacker]

Basically a way to find "all" of a certain element.

Feature one: Find the closest common parent. If we take a news website often times an article will involve a title, an image as well as a description. This could be something like

<article>
  <h3>Title</h3>
  <span class="tag">Some Tag</span>
  <div>
    <img src="...">
    <p class="description">Some Description</p>
  </div>
</article>

If I want to get a selector for the article, my idea would be to click ex. the title as well as the image it would return the <article> path, as it's the closest parent of the given elements. In practice this would mean, you pass an array of DOM elements into a parentFinder function (or add an optional "mode" parameter to the finder function). who would then first traverse the DOM towards the root and then once a common ancestor is found simply call finder on that one

Feature two: Find multiple similar events. Again let's take the news website from Feature one. Currently finder would only return a path to the exact DOM element. This might look something like #articles > article:nth-child(3) for the 3rd article. I'd want a way for it to find similar elements, so ex. all <article> elements within #articles.
I think one possible implementation would be to use Feature one, to find the wrapping container and once that is found, have an array where you need to supply one DOM element of each item you're looking for in said container, meaning it looks again for a parent path that would match each of the supplied selectors individually. Though I'm sure there has to be a better way, or even a way only requiring you to supply 2-3 examples.

[antonmedv]

First one is easy. And can be implemented as a separate function. I guess on npm such packages exist.

For the second one: it is interesting 🤨

PS it is better to separate feature requests in different issues.

[allenchuang]

I'm interested in the feature too. Are there other libraries that does this? Would be nice to support this natively in this package

For feature 2 wouldn't the selector you're looking for be:

'#articles > article'?