0

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!

mr. parchman
  • 93
  • 9
  • We have to **wrap** the content between `` and `` in another `` and give them background. Is that you need.? – Jithin Raj P R Aug 11 '17 at 13:28
  • Your HTML Code is not W3C conform, you do not want to have an opening `` like you can do with inputs. Overthink your DOM-structure, maybe add classes to the elements you'd expect to be highlighted at once. – Jonathan Aug 11 '17 at 13:37
  • You can't wrap anything that is on different hierarchical levels in the DOM. And I want to add classes to the elements that need to be highlighted but I have to find out which elements these are, that's the core question. I cannot change the DOM structure however. – mr. parchman Aug 12 '17 at 16:56

1 Answers1

0

Yes that is possible using .nextUntil()

e. g.

var everythingInBetween = $('#V\\.64.start').nextUntil('#V\\.64.end').andSelf();

Note that you will have to escape the "." in the id-selector.

Jonathan
  • 1,955
  • 5
  • 30
  • 50