Scrape title and content with no parent wrapper

How to?
#1

I encountered a site similar to this HTML hierarchy:

<h1>Category 1</h1>
<ul>
<li>item a</li>
<li>item b</li>
<li>item c</li>
</ul>
<h1>Category 2</h1>
<ul>
<li>item x</li>
<li>item y</li>
</ul>

I want to transform it into a table like this:

category item
Category 1 item a
Category 1 item b
Category 1 item c
Category 2 item x
Category 2 item y

Because there is no HTML tag that wraps <h1> and <ul>, I can't use the Element selector. Is there any way to scrape this information?

#2

Hi,

Are all elements on the same HTML level? Can you share the URL?

#3

Yes, all elements are on the same HTML level. That's why I find this case difficult.

I prefer not to share the URL in public, but I can describe the webpage that I encountered the problem. The webpage is a table of contents of a magazine. They have section headers for each article link, in a format like this:

Section header 1

Article link 1
Article link 2

Section header 2

Article link 3
Article link 4
Article link 5

All section headers are placed on the same HTML level as the articles. Of course, the actual page is more complicated than that - there are complicated internal structure inside each article link block - but the main problem here is each section header is on the same level as the article link block. My goal is to get the article title, article link, and their corresponding section header as a table.

I think the code I provided previously is the simplest example to reproduce this case. For debugging purpose, you can paste the code in <body> of any website and the extension's "Data preview" button should work.

#4

In fact, a more realistic test code is this:

<h1>Category 1</h1>
<div>item a</div>
<div>item b</div>
<div>item c</div>
<h1>Category 2</h1>
<div>item x</div>
<div>item y</div>

The website does not have a parent HTML node wrapping the articles within each section header. All HTML elements are just in the same level.