javascript - 用跨度包围 2 个同级元素

Question

假设我有这个 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>

现在我已经有了目标元素 $(start) 和 $(end)。我想在鼠标按下时制作这个 html

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

我想恢复这个。

这与 this question 相关我已经有了“目标元素”。

如果它更容易，结构可能会始终如上。 div 内的 span 集合。我觉得jQuery nextUntil可能是最好的方法，但我无法完全解决。

Answer 1

您可以使用 .wrapAll() 在 jQuery 中包装元素集合。和 .unwrap() :

Fiddle Demo

添加突出显示:

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
}