Convert a list of divs into 2 columns

How to?
#1

Page I'm scraping: https://jisho.org/search/%23jlpt-n5%20%23words

I'm trying to scrape a japanese-english dictionary site. right now, it presents its meanings like this:

div 1: part of speech
div 2: meaning
div 1: part of speech
div 2: meaning
div 1: part of speech
div 2: meaning
etc.

What I want to do is take put the parts of speech in one column, and the meanings in another column, so when I export my data, it looks something like this:

word 1 | part of speech 1 | meaning 1
word 1 | part of speech 2 | meaning 2
word 1 | part of speech 3 | meaning 3
word 2 | part of speech 1 | meaning 1
word 2 | part of speech 2 | meaning 2

Is there a way to do this? I know how to make a selector for them separately, but if I just make two selectors, it puts the parts of speech and meanings in their own rows.

Sitemap:
{"_id":"n5_vocab","startUrl":["https://jisho.org/search/%23jlpt-n5%20%23words"],"selectors":[{"id":"entries","type":"SelectorElement","parentSelectors":["_root"],"selector":"div#primary div.concept_light","multiple":true,"delay":0},{"id":"word","type":"SelectorText","parentSelectors":["entries"],"selector":"div.concept_light-wrapper span.text","multiple":false,"regex":"","delay":0},{"id":"furigana","type":"SelectorText","parentSelectors":["entries"],"selector":"div.concept_light-wrapper span.furigana","multiple":false,"regex":"","delay":0},{"id":"meanings","type":"SelectorElement","parentSelectors":["entries"],"selector":"div.meanings-wrapper","multiple":false,"delay":0},{"id":"parts of speech","type":"SelectorText","parentSelectors":["meanings"],"selector":"div.meaning-tags","multiple":true,"regex":"","delay":0},{"id":"definitions","type":"SelectorText","parentSelectors":["meanings"],"selector":"div.meaning-wrapper span.meaning-meaning","multiple":true,"regex":"","delay":0}]}

#2

Hi all. Just replying here to say I've figured out how to do what I want.

  1. Create an element selector for the parts of speech div (in my case, it's "div.meaning-tags")
  2. Create 2 child selectors, one referring to the current element, and the other using the "+" selector to select the element after it. In my case, the former is a text selector selecting the parent's text for the part of speech ("parent"), and the latter is another text selector selecting the div immediately after ("+div").
#3

What is a "+" selector? Can you share your sitemap?

#4

What is a "+" selector?

https://www.w3schools.com/cssref/sel_element_pluss.asp
 
Short answer is using "[element 1] + [element 2]" as a selector selects every [element 2] that immediately follows any [element 1].
 
Unfortunately, when I realized this and used it in my sitemap, I found out soon after that it didn't work for what I as trying to do (turns out not every definition follows a part of speech header), so I had to change it. Thus, I don't have a sitemap right now that I can give as an example. I'll try to whip up something to show what I mean, though.

#5

Hi Marco,

thanks for the reply. I would really appreciate a practical example, because I have similar problem and believe this could help me out.