0

I am creating a function that returns a jQuery object of all of the elements of a given selector across paged content.

const getPagedContent = async (base, selector) => {
    let elements = [];
    let lastPage = 1;
    let page = 0;
    while (lastPage > page) {
        page++;
        let response = await got(`${base}/page/${page}`);
        let html = new jsdom.JSDOM(response.body);

        elements.push($(html).find(selector));

        lastPage = getLastPage(html);
    }
    return elements;
}

However, this does return a jQuery object with all the elements but (obviously) an array with multiple jQuery objects. How can I add the results from each page so I can return one jQuery object with all the elements?

Edit: Attempting to use .add returns a jQuery object with a length of 0. I am not sure how to adopt add for multiple doms.

const getPagedContent = async (base, selector) => {
    let elements = $();
    let lastPage = 1;
    let page = 0;
    while (lastPage > page) {
        page++;
        let response = await got(`${base}/page/${page}`);
        let html = new jsdom.JSDOM(response.body);

        elements.add($(html).find(selector));

        lastPage = getLastPage(html);
    }
    console.dir(elements);
    console.log('Items length:', elements.length);
    return elements;
}

jQuery {}
Items length: 0
Settings Menu Hard to Find
  • 1,121
  • 14
  • 31
  • What's a "*jQuery object*"? Do you mean a jQuery element? Or maybe a JavaScript object containing jQuery elements? If the second, what should the keys be? – M0nst3R Jul 29 '20 at 08:48
  • Is what is returned by `.find` not an object of jQuery elements? I am looking to merge the elements from multiple pages to look as if the results from `.find` was ran on all pages. – Settings Menu Hard to Find Jul 29 '20 at 09:09
  • I see what you mean now, does this answer your question: https://stackoverflow.com/questions/323955/how-to-combine-two-jquery-results/323969? – M0nst3R Jul 29 '20 at 09:14
  • I have not had success using add. I have edited the question above to show what I have tried. – Settings Menu Hard to Find Jul 29 '20 at 09:26
  • 1
    Would it be possible for you to provide a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example)? It would make debugging this issue so much easier. – M0nst3R Jul 29 '20 at 09:32
  • If I understand the questionar right, he wants to use a jquery object as container for another jquery objects insteand of an array. In my eyes not possible, because jquery object is not compatible for this usecase. – Reporter Jul 29 '20 at 09:51

1 Answers1

1

What you need to use is indeed jQuery's .add(). The only problem with your current code is coming from the fact the .add() method does not mutate the jQuery object that called it, instead, it returns a new jQuery object with the combined contents of the caller and the added element.

The newly generated object needs to be assigned to caller as such:

let elements = $();
elements = elements.add($('some selector'));

The code snippet below illustrates a working example of this approach.

let elements = $();

for (let i = 0; i < 2; i++) {
    elements = elements.add($(`.outer${i}`).find('.inner'));
}

console.log(elements.length);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outer0">
    <div class="inner"></div>
</div>
<div class="outer1">
    <div class="inner"></div>
</div>
M0nst3R
  • 5,186
  • 1
  • 23
  • 36