Trying to retrieve SPAN tags within nested DIV tags using JSOUP - xml-parsing

Question

Hello I am trying to extract the span tags that are in nested DIV tags, using JSoup. The code below is just a snippet of larger code.
<div class="formitem formgroup horizontal">
<div class="formitem formgroup horizontal">
<div class="formitem formgroup vertical" style="width:325px">
<div class="formitem formgroup horizontal">
<div class="formitem formgroup vertical" style="width:325px;">
<div class="formitem formgroup horizontal">
<span class="formitem formfield">
<span class="value" style="font-weight:bold">47 Lower River St</span>
</span>
<span class="formitem formfield">
<span class="value" style="font-weight:bold">531</span>
</span>
</div>
</div>
</div>
<div class="formitem formgroup horizontal">
<span class="formitem formfield">
<span class="value" style="font-weight:bold">Toronto</span>
</span>
<span class="formliteral formitem" />
<span class="formitem formfield">
<span class="value">Ontario</span>
</span>
<span class="formliteral formitem" />
<span class="formitem formfield">
<span class="value">M5A0G1</span>
</span>
</div>
</div>
<div class="formitem formgroup vertical" style="width:150px;">
<div class="formitem formgroup horizontal">
<span class="formitem formfield">
<label>List:</label>
<span class="value" style="font-weight:bold">$279,900</span>
</span>
<span class="formitem formfield">
<label>For:</label>
<span class="value" style="font-weight:bold">Sale</span>
</span>
</div>
</div>
</div>
<span class="formitem formfield">
<span class="value">Toronto C08</span>
</span>
<span class="formliteral formitem" />
<span class="formitem formfield">
<span class="value">Moss Park</span>
</span>
<span class="formliteral formitem" />
<span class="formitem formfield">
<span class="value">Toronto</span>
</span>
<span class="formitem formfield">
<span class="value">120-21-S</span>
</span>
</div>
I am trying to extract the text in the last SPAN tags (Toronto C08, Moss Park, Toronto and 120-21-S)
<span class="formitem formfield">
<span class="value">Toronto C08</span>
</span>
<span class="formliteral formitem" />
<span class="formitem formfield">
<span class="value">Moss Park</span>
</span>
<span class="formliteral formitem" />
<span class="formitem formfield">
<span class="value">Toronto</span>
</span>
<span class="formitem formfield">
<span class="value">120-21-S</span>
</span>
I have parsed other parts of the document with success however, I can't seem to isolate these spans. The snippet of code is from a much larger page (full page). I may be using the wrong approach, but here is what I did to capture the spans between the parent DIV (results at top of post).
Elements elements = doc.select("div[class=formitem legacyBorder formgroup vertical]");
Element zoneElement = elements.select("div[class=formitem formgroup vertical")
.select("[style=width:500px]").select("div[class=formitem formgroup horizontal").first();
So now I have the first element but I need the last 6 span tags at the end of the block of selected code. Thanks

Answer 1

Open your browser's developer tool (F12), select the "inspect elements" tool, highlight the field you want (e.g. TORONTO C08) and choose its css selector. For "TORONTO C08" it will be:
#C3627690 > div:nth-child(3) > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) > span:nth-child(2) > span:nth-child(1)
Do the same for all the other elemens. After getting all the selectors, check them closely - maybe they have a common pattern (e.g different only at the 3rd value), so you will be able to iterate over them with a loop.