Javascript 将2个同级元素用跨距环绕

假设我有这个HTML

<div class="parent">
    <span class="foo">Some text</span>
    <span class="foo">FROM HERE</span>
    <span class="foo">some text</span>
    <span class="foo">TO HERE</span>
    <span class="foo">some text</span>
</div>

我想把这件事再提回来

这与我已经拥有“目标元素”的地方有关

---

如果它能让事情变得更容易，那么结构很可能总是如上所述。

div

中的

范围的集合。我觉得jQuery可能是最好的方法，但我不能完全解决它。
您可以使用and在jQuery中包装一组元素：


添加亮点：

var $wrapped = highlight($start, $end, '.foo'); // highlight and get the highlighted items collection

$wrapped.unwrap(); // use unwrap on the collection to remove highlight

删除突出显示：

var $wrapped = highlight($start, $end, '.foo'); // highlight and get the highlighted items collection

$wrapped.unwrap(); // use unwrap on the collection to remove highlight

突出显示功能：

function highlight($start, $end) {
    /** return the wrapped collection **/
    return $start
        .nextUntil($end) // get elements between $start and $end
        .addBack() // add $start back
        .add($end) // add $end
        .wrapAll("<span class='highlight' />"); // wrap them with highlight
}

功能突出显示（$start，$end）{
/**返回已包装的集合**/
返回$start
.nextUntil（$end）//获取$start和$end之间的元素
.addBack（）//添加$start back
.add（$end）//添加$end
.wrapAll（“”；//用高亮显示将其包装起来
}