I have empty <span> elements that can be anywhere in the DOM. They have a specific class and id like <span class="start" id="V.64"/> and <span class="end" id="V.64.end"/>. So I can identify the starting point and the endpoint via the id. I now want to highlight everything that is in between those two <span>Elements. Is there any way to do that with jQuery?
EXAMPLE HTML:
<html>
<head>
<title></title>
</head>
<body>
<p class="upper-case">
<b>In Matutinis</b>
<span class="ab">
<b data-toggle="tooltip">INV</b>
<i class="incipit">Rex noster</i>. <span class="phenomena">*</span>
</span>
<span class="ab">
<span class="start" id="V.112"/>
</span>
<span class="ab">In Secundo Nocturno <b data-toggle="tooltip" data-original-title=""
title="">AN</b>
<i class="incipit">Nox praecessit</i>. <span class="end" id="V.112.end"/><b
data-toggle="tooltip" data-original-title="" title="">RP</b>
<i class="incipit">Civitas Hierusalem</i>.
<i class="incipit"
>Sicut mater</i>. <b data-toggle="tooltip" data-original-title="" title=""
>RV</b>
<i class="incipit">Deus a Libano veniet</i>. <span class="start" id="V.114"/>
</span>
<span class="ab">In Tertio Nocturno
<span class="end" id="V.114.end"/>
<b data-toggle="tooltip">EV</b>
<i class="incipit">Erunt signa in sole</i>. <b data-toggle="tooltip">RP</b>
</span>
</p>
</body>
Note that the start and end spans can be anywhere in the DOM. Not just siblings! Thanks a lot for your answers!
Yes that is possible using .nextUntil()
e. g.
Note that you will have to escape the "." in the id-selector.