Combine jQuery objects from multiple pages

Question

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

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
– M0nst3R, Commented Jul 29, 2020 at 8: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
– Settings Menu Hard to Find, Commented Jul 29, 2020 at 9:09
I see what you mean now, does this answer your question: stackoverflow.com/questions/323955/…? — M0nst3R
– M0nst3R, Commented Jul 29, 2020 at 9: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
– Settings Menu Hard to Find, Commented Jul 29, 2020 at 9:26
Would it be possible for you to provide a minimal reproducible example? It would make debugging this issue so much easier. — M0nst3R
– M0nst3R, Commented Jul 29, 2020 at 9:32

M0nst3R · Accepted Answer · 2020-07-29 09:56:00Z

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>

Collectives™ on Stack Overflow

Combine jQuery objects from multiple pages

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related