使用 jQuery 匹配两个 HTML 元素之间的所有内容答案

【问题标题】：Matching everything between two HTML elements with jQuery使用 jQuery 匹配两个 HTML 元素之间的所有内容
【发布时间】：2017-08-11 21:29:35
【问题描述】：

我有空的  元素，可以在 DOM 中的任何位置。它们有一个特定的 class 和 id，例如  和 。所以我可以通过id来识别起点和终点。我现在想强调这两个Elements 之间的所有内容。有没有办法用 jQuery 做到这一点？

示例 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>

请注意，开始和结束范围可以在 DOM 中的任何位置。不只是兄弟姐妹！非常感谢您的回答！

【问题讨论】：

我们必须将 和 之间的内容包装到另一个 中，并为其提供背景信息。这是你需要的吗？
您的 HTML 代码不符合 W3C 标准，您不希望像使用输入一样打开 。过度考虑您的 DOM 结构，可能会为您希望立即突出显示的元素添加类。
您不能将位于 DOM 中不同层级的任何内容包装起来。我想为需要突出显示的元素添加类，但我必须找出这些是哪些元素，这是核心问题。但是，我无法更改 DOM 结构。

标签： jquery html traversal jquery-traversing

【解决方案1】：

是的，可以使用 .nextUntil()

e。 g.

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

请注意，您必须对“.”进行转义。在 id 选择器中。

【讨论】：