Best way to construct a Cheerio object from an Element?

[cdauth]

Both when using jquery and cheerio, I find myself quite often wanting to create a jquery/cheerio object from an element. Usually this happens when dealing with a list of elements, for example when iterating over them using a for loop (to be able to use continue, break and return, which is not easy to do with .each()) or when mapping a set of elements to an array. A jquery/cheerio object somewhat resembles an array of elements, so when iterating over it, I need to convert each element to its own jquery/cheerio object in order to be able to use the jquery/cheerio API on it. Here is a real-world example with jquery:

import $ from 'jquery';

export function getParameters($el: JQuery): Record<string, string> {
    return Object.fromEntries([...$el.find('> ac\\:parameter')].map((p) => {
        const $p = $(p);
        return [$p.attr('ac:name'), $p.text()];
    }));
}

The conversion from the element to the jquery object happens by doing const $p = $(p);. In cheerio, this works the same, but $ is the root object of the document, rather than a global variable. This means that in a reusable function as the one above, I don't automatically have access to it. I can see 4 options how to do this. I'm not really happy with any of these, so I'm wondering if there is a better/recommended way how to do this.

1. Pass the root object to the function:

export function getParameters({ $, $el }: { $: cheerio.Root; $el: cheerio.Cheerio }): Record<string, string> {
    return Object.fromEntries([...$el.find('> ac\\:parameter')].map((p) => {
        const $p = $(p);
        return [$p.attr('ac:name'), $p.text()];
    }));
}

In this case I'm basically passing the $ root object around as an additional parameter. I find it quite cumbersome to declare and pass the additional parameter on every function.

2. Use a custom helper function to convert a cheerio object to an array or iterator:

export function* cheerioIterator(el: cheerio.Cheerio): Generator<cheerio.Cheerio, void, void> {
    for (let i = 0; i < el.length; i++) {
        yield el.eq(i);
    }
}

export function getParameters($el: cheerio.Cheerio): Record<string, string> {
    return Object.fromEntries([...cheerioIterator($el.find('> ac\\:parameter'))].map(($p) => {
        return [$p.attr('ac:name'), $p.text()];
    }));
}

This is the most elegant way that I could think of. The only disadvantage that I can think of is the additional code that is needed.

3. Use the internal ._make() function (or ._root() property):

export function getParameters($el: cheerio.Cheerio): Record<string, string> {
    return Object.fromEntries([...$el.find('> ac\\:parameter')].map((p) => {
        const $p = $el._make(p);
        return [$p.attr('ac:name'), $p.text()];
    }));
}

This seems to be the way how cheerio constructs these objects internally. It's not very elegant, as the method is not public and does not exist in the TypeScript typings.

4. Construct the cheerio object with a different root:

export function getParameters($el: cheerio.Cheerio): Record<string, string> {
    return Object.fromEntries([...$el.find('> ac\\:parameter')].map((p) => {
        const $p = cheerio.load(p);
        return [$p.attr('ac:name'), $p.text()];
    }));
}

This resembles the jquery approach, but I suspect that it might have some unwanted side effects because the parser options are not passed along.